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 ex thumbnail-1，thumbnail-2中的每个类，并从ajax获取数据。

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

我不测试此代码应该有错误输入。我写的只是为了得到一个想法

PS。我脑子里没有别的办法了。我不会这样做的。我们住在2015年，我们得到4G :)我只是优化我的图像。

WordPress加载正确的图像大小

1 个答案: