1

私は、jQueryのdata（）src関数とHTML5データ属性を使用して、メディアクエリに基づいて画像の属性を動的に切り替えるスクリプトに取り組んでいます。この背後にある考え方は、デフォルトでローファイ画像を提供し（モバイル用に最適化）、大画面用にハイファイ画像を提供することです。（これは必ずしも画像に限定されるわけではありません。）スクリプトは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()でサポートされていることを知っています。関数なしでテストしました。したがって、この問題はトリガーまたはor関数と関係があると思います。私が欠けているものについて何か考えはありますか？Modernizr.mqresize()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未満に縮小しません。）

4

1 に答える 1

0

FF のウィンドウ サイズが最小であることはすでにわかりました。正確な値はわかりませんが、最初に使用可能なビューポート幅のパーセンテージだと思います。これは、FF が作成された言語である XUL の制限です。

問題は、これは本当にあなたの場合の問題ですか? ウィンドウのサイズをいじるのは、(フロントエンドの) Web 開発者だけです。通常のユーザーは、ページを読み込んでそのままにしておくだけなので、基本的には、この機能をサイズ変更イベントに関連付ける必要はあまりないのではないかと考えています。

さらに、これはユーザーがウィンドウを拡大するときではなく、縮小するときにのみ問題になります。彼らがすでに高解像度の画像を読み込んでいるのに、わざわざ低解像度の画像も読み込んでしまうのはなぜでしょうか?

于 2012-03-22T16:20:51.337 に答える