javascript - jQuery data() 和 resize() 更改 src 属性

Question

我正在开发一个使用 jQuery 的脚本 data()函数和 HTML5 数据属性，用于根据媒体查询动态切换图像的 src 属性。其背后的想法是默认提供低保真图像(针对移动设备进行了优化)，并为更大的屏幕提供高保真图像。 (这不一定限于图像。)该脚本在 Chrome/Opera/Safari/iOS 中 100% 运行，但在 FF 和 IE 中不完全运行。

<img src="ex1_lo-res.png" data-websrc="ex2_hi-res.png" alt="example">
<img src="ex2_lo-res.png" data-websrc="ex2_hi-res.png" alt="example">

使用中的一个活生生的例子是 responsetheme.com ，宽度超过 480 像素时，图像应为粉色，宽度低于 480 像素时，图像应为黄色。我知道 FF 和 IE 都支持 data() 和 Modernizr.mq — 我在没有使用 resize() 函数的情况下测试了它们。所以我认为这个问题与触发器或each()或resize()函数有关。知道我缺少什么吗？

jQuery(document).ready(function($) {
    /* get elements that have a data-websrc attribute */
    $websrc = $('[data-websrc]');   

    $websrc.each(function() {   
        /*
        Set data-osrc equal to element's original src value.
        This allows us the ability to access the original src
        (even after we replace the attribute).
        */
        var $this = $(this);    
        $this.data('osrc', $this.attr('src'));
    });             

    $(window).resize(function() {
        /*
        Check breakpoint. 
        (Modernizr.mq checks the media query and returns boolean.)
        */
        airsrcWEB = Modernizr.mq('screen and (min-width:480px)');

        /*
        Replace src with data-websrc (if above breakpoint). 
        Otherwise fallback to data-osrc (original src).
        */
        $websrc.each(function() {           
        var $this = $(this);    
            var src = ( window.airsrcWEB ) ? $this.data('websrc') : $this.data('osrc');
            $this.attr('src', src);
        });                 
    }).resize(); // trigger resize handlers
});

另外，我不确定我是否以最有效的方式拥有这些功能，就哪个功能在哪个功能而言，所以我还想听听任何加快速度的提示。 =)

更新 1:我也尝试过像这样的三元，但仍然存在同样的问题:

var src = ( airsrcWEB ) ? $this.data('websrc') : $this.data('osrc');

更新 2:我解决了 FF 的问题。显然，FF6 窗口的宽度不会调整到低于 556 像素。我用上面的断点测试了脚本，并且开关工作了。 (即使 mediaqueri.es 上的示例在 FF6 中也不会缩小到 556px 以下。)

Answer 1

您已经发现 FF 具有最小窗口大小。我不知道确切的值，但我相信它是初始可用视口(viewport)宽度的百分比。 这是编写 FF 的语言 XUL 的限制。

问题是，这真的是您的问题吗？唯一摆弄窗口大小的人是(前端)网络开发人员。普通用户只需加载页面并坚持使用它，所以基本上我认为您可能并不真正需要将此功能附加到调整大小事件。

此外，这只是用户缩小窗口时的问题，而不是扩展窗口时的问题。如果他们已经加载了高分辨率图像，为什么还要加载低分辨率图像呢？