根据视口宽度更改图像源

 $(window).resize(function(){ var width = $(window).width(); if (width < 361) { $(".infograph-image").attr("src","/images/infographicHowMobile.png"); } });  

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

我有两个简单的问题：

1）我们如何做到这两点：a）检测窗口resize和文档准备好了吗？

这，我相信我得到了：

我需要将其更改为一个函数。 然后在加载时调用它;

 checkResponsive(); 

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

 $(window).resize(checkResponsive); 

2）我们有几个图像需要有一个移动版本，这应该转换为一个function吗？ 或者几个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方法。 如果你真的想让它干净，还要检查传递的元素和图像是否存在，并在需要时使用回退。