WordPress加载正确的图像大小

Question

我正在开发一个WordPress网站，其中将上传HQ图像。为了获得更好的用户体验并且不加载大图像或不必要的图像，我需要在手机上加载较小尺寸的图像，在平板电脑和台式机上加载原始尺寸的图像。

一直在Google，Stack-overflow和其他一些网站上搜索答案，但找不到任何好的答案。到目前为止，唯一和最好的答案是使用 css 或 javascript 并执行 display：none 。这样做的问题是，所有这些东西无论如何都会加载但不可见。我正在寻找一种解决方案，可以在移动设备上仅加载移动尺寸的图像，在台式机或更高版本上加载桌面尺寸的图像。

Answer 1

我认为可以使用

ajax，javascript来检测浏览器宽度并从那里加载内容

例如，内部循环您可以获取帖子缩略图

<?php while(have_post()) ?>
    <div postid="<?php echo $post->ID ?>" class="thumbnail-1"> 
        <!--load form ajax--> 
    </div>
<?php endwhile ?>

在脚本中

<script>
    var id = $('thumbnail-1').getAttr('postid');
    $.ajax(get_thumbnail.php, { id: postid, width: screen.width, height:screen.height }, function($data){
        $('thumbnail-1').Html($data)
    }
    );
</script>

内部get_thumbnail.php

function($id, $width, $height){
    if(width > 650){
        return get_post_thumbnail($id, 'medium');
    }
    else{
        return get_post_thumbnail($id);
    }
}

你必须找到某种方法来循环遍历JavaScript中的每个类，例如缩略图-1，缩略图-2，并从Ajax获取数据。

这是一种情况，可能需要以不同的方式实现不同的图像加载

我不是在测试这段代码，应该有错别字 ALOT。我写信只是为了得到一个想法

PS.我想到没有其他方法。我不会这样做。我们生活在2015年，我们得到了4G:)我只是在优化我的图像。