Wordpress sider 的“移动优先”图像加载

Question

据我所知，到目前为止，我用于 Wordpress 网站的所有图像滑块插件都无法在不同的屏幕尺寸下更换不同尺寸的图像以实现“移动优先”体验。

例如：http://www.akqa.com/

他们已经根据某些断点更改了显示的图像，并且允许控制显示图像的哪一部分。

如果没有插件可以自动完成，至少可以通过 CSS 来实现吗？

谢谢

Answer 1

您可以通过 HTML picture tag 或 Jquery .data() 来完成此操作

Jquery 示例

orignalImg = $(".test").attr("src"); // get orignal image
mobileImg = $(".test").data("mobile"); // get mobile image
brakpoint = 768; //what ever your brakpoint

//do magic
function changeImg() {
  $(".test").each(function() {
    if ($(window).width() <= brakpoint) {
      $(this).attr("src", mobileImg);
    }else {
   	 	$(this).attr("src", orignalImg);
    }
  });
}
// call magic
changeImg();

//change image if viewport change
$(window).on('resize', function() {
  changeImg()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Resize your window </h1>
<img class="test" src="http://placehold.it/600x300" data-mobile="http://placehold.it/300x600">

HTML 示例

<picture>
 <source srcset="http://placehold.it/600x300" media="(min-width:768px)">
 <img src="http://placehold.it/300x600" alt="img">
</picture>

在您的example link 中，他们也在使用这个<picture> 标签。这是一个简单的解决方案，但您可能会遇到browser compatibility issue