4

我有两个不同尺寸的图像，一个用于小于 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();
    });
 });
4

4 回答 4

4

尝试使用 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");
   }
}
于 2012-09-18T07:18:41.910 回答
2

先试试这个...

更改以下代码行

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

到

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

并将警报放入 imageresize 以查看它是否有效...

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

在你的代码中

$(document).ready(function() {

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

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

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

于 2012-09-18T07:11:40.090 回答
2

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

于 2014-01-29T03:50:01.367 回答
1

如我所见，您的代码运行良好，但我更喜欢使用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/

于 2012-09-18T07:33:19.563 回答