根据视口宽度更改图像源

Question

<script type="text/javascript">
  $(window).resize(function(){
  var width = $(window).width(); 

   if (width < 361) {
      $(".infograph-image").attr("src","/images/infographicHowMobile.png");
   }
 }); 
</script>

我希望根据视口宽度大小更改给定图像的图像源。 如果视口宽度大小为 360 或更小，请更改为图像的移动版本。

我有两个简单的问题：

1) 我们如何做到这两点：a) 检测窗口调整大小并准备好文档？

这个，我相信我得到了：

我需要把它变成一个函数。 然后在加载时调用它；

checkResponsive();

然后绑定一个事件监听器：

   

$(window).resize(checkResponsive);

2) 我们有几张图片需要手机版，应该转换成功能吗？或者几个 if 可能会起作用？

能否请您先介绍一下这两个问题。

Answer 1

创建一个单独的函数并在两个事件上调用它们。 因此，例如，像这样创建函数 mobileImg()：

function mobileImg(targetClass, imageSrc) {
    var width = window.innerWidth; // No need for jQuery here, raw JS can do this

    if(width < 361) {
        $(targetClass).attr("src", imageSrc);
    }
}

然后在这两个事件上调用它。

$(document).ready(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));
$(window).resize(mobileImg(".infograph-image", "/images/infographicHowMobile.png"));

然后，您可以根据需要使用任何参数调用mobileImg 方法。 如果你真的想让它干净，还要检查传递的元素和图像是否存在，并在需要的地方使用后备。