调整浏览器大小时使用jQuery更改图像src答案

【问题标题】：Using jQuery to change image src when browser is resized调整浏览器大小时使用jQuery更改图像src
【发布时间】：2012-09-10 09:56:46
【问题描述】：

我有两张不同尺寸的图片，一张用于小于 759 像素的屏幕，另一张用于大于 759 像素的屏幕。

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

这是我的代码：

$(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();
    });
 });

【问题讨论】：

我试过这个jsFiddle，它在调整大小时改变了图像的src。 我错过了什么吗？您的问题到底是什么？
我已经测试过 // 绑定事件监听器 $(window).resize(imageresize);在 jsFiddle 中，它按预期工作......
只是一个提示：在调整窗口大小时使用 .each 非常消耗 CPU

标签： jquery image replace screen-size window-resize

【解决方案1】：

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

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

考虑在 .每当屏幕大小从 600px 调整为 900px 时； 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");
   }
}

【讨论】：

虽然 CSS3 对于这些东西确实很方便；为了浏览器兼容性（例如不兼容 CCSS3 的浏览器），我建议在 jQuery 中进行。
另外，OP 可能希望图像是带有 src 而不是背景图像的实际 img 标签。
@Simon，基本概念是根据窗口大小翻转图像。我给出的是在这种情况下使用媒体查询的示例。我只是展示了路线图，不是确切的答案。

【解决方案2】：

先试试这个……

更改您的以下代码行

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

到

// Bind event listener
    $(window).resize(imageresize);

并在 imageresize 中添加 alert 以查看它是否有效...

万一以上不成功...我相信可能有一个问题..

在你的代码中你有

$(document).ready(function() {

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

因此，驻留在 jquery 中的函数可能无法正常工作。最重要的是尝试使用简单的javascript；我有类似的问题并使用纯javascript解决，而jquery在某些浏览器中不起作用。

听起来很奇怪，足以阻止你尝试它，但会奏效......

【讨论】：

【解决方案3】：

这不是 jQuery，但您可以简单地使用 document.getElementById("myId").src="another.jpg"; 定义 id 为“myId”的 img 的新 src。

【讨论】：

【解决方案4】：

如我所见，您的代码运行良好，但我更喜欢使用 setTimeout，有时页面可能会在没有调整大小暂停的情况下变慢。

$(document).ready(function() {
    var resizeTimer,
        $window = $(window);

    function imageresize()
    {
        if ($window.width() < 700)
        {
            $('.fluidimage').text('< 700');
        }
        else
        {
            $('.fluidimage').text('>= 700');
        }
    }
    imageresize();//Triggers when document first loads

    $window.resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(imageresize, 100);
    });
 });

示例：jsfiddle.net/SAbsG/

【讨论】：