jquery - 使用 jQuery 在浏览器调整大小时更改图像 src

Question

我有两个不同尺寸的图像，一个适用于小于 759px 的屏幕，另一个适用于大于 759px 的屏幕。

我已经设法在文档加载时根据窗口宽度更改图像的来源。但我真的希望在调整浏览器大小时也能够执行此操作，但我一生都无法做到这一点，它似乎只在页面最初加载时才起作用。

这是我的代码:

$(document).ready(function() {
    function imageresize() {
        var contentwidth = $(window).width();
        if ((contentwidth) < '700'){
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x2', 'x1');
                thisImg.attr('src', newSrc);
            });
        } else {
            $('.fluidimage').each(function(){
                var thisImg = $(this);
                var newSrc = thisImg.attr('src').replace('x1', 'x2');
                thisImg.attr('src', newSrc);
            });
        }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
        imageresize();
    });
 }); 

Answer 1

尝试使用 css3 媒体查询，而不是使用 jQuery 或 javascript。

http://css-tricks.com/media-queries-sass-3-2-and-codekit/

考虑在 .每当屏幕大小调整为黑白 600 像素至 900 像素时； x2.jpg 将被加载。默认情况下将使用 x1.jpg。

例如:

.img-src {
   background-image: url("http://imageurlhere.com/x1.jpg");
}


@media (min-device-width:600px) and (max-width:900px) {
  .img-src {
      background-image: url("http://imageurlhere.com/x2.jpg");
   }
}