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中支持data()和Modernizr.mq，IE-I在没有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窗口不会调整到大约556px宽度以下。我用上面的断点测试了脚本，并且交换机工作正常。（即使mediaqueri.es上的示例在FF6中也不会缩小到556px以下。）

Answer 1

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

问题是，这是否真的是你的问题？唯一一个摆弄窗口大小的人是（前端）webdevelopers。普通用户只需加载页面并坚持使用它，所以基本上我认为你可能不需要将此功能附加到resize事件。

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

jQuery data（）和resize（）来改变src属性

1 个答案: