1 
<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可以工作？

请你给我一个关于这两个问题的开始。

4

1 回答 1

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

于 2012-10-08T15:30:03.870 回答