Question

我有工作代码根据屏幕分辨率更改图像路径：

    jQuery(window).load(function(){
      jQuery(function() {
       if(jQuery(window).width() <= 600) {
        jQuery("img").each(function() {
        jQuery(this).attr("src", jQuery(this).attr("src").replace("uploads/2013/06/", "uploads/2014/04/"));
       });
       }
       });

    });

但是可以在不重新加载页面的情况下完成这项工作吗？当我调整浏览器窗口的大小（例如从1280px到500px）时，它不会更改图像路径。当尺寸小于600px时，我将不得不重新加载页面然后它可以工作。

Answer 1

加载时绑定事件并调整大小：

 jQuery(window).on("load resize",function(e){
  jQuery(function() {
   if(jQuery(window).width() <= 600) {
    jQuery("img").each(function() {
    jQuery(this).attr("src", jQuery(this).attr("src").replace("uploads/2013/06/", "uploads/2014/04/"));
   });
   }
   });
});

你也可以缩小代码范围，将src替换为：

 jQuery('img').prop('src', function () { return this.src.replace("uploads/2013/06/", "uploads/2014/04/"); })

根据屏幕分辨率更改图像路径

1 个答案: