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

Question

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

例如: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