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）我们有几个图像需要有一个移动版本，是否应该转换为一个功能？或者几个ifs可能有用吗？

请您在这两个问题上给我一个启动开始。

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方法，并使用任何参数。如果你真的想让它干净，还要检查传递的元素和图像是否存在，并在需要时使用回退。

根据视口宽度更改图像源

1 个答案: