3

これらの画像は動的にロードされます:

<div id="gallery-images" class="gallery-control">
    <ul>
        <img class="galleryImgs" data-src="images/test-image-1.jpg" src="images/test-image-1-s.jpg" />
        <img class="galleryImgs" data-src="images/test-image-2.jpg" src="images/test-image-2-s.jpg" />
        <img class="galleryImgs" data-src="images/test-image-3.jpg" src="images/test-image-3-s.jpg" />      
    </ul>
</div>

各 img タグの「data-src」属性から画像 URL をプリロードしようとしています。これは私が書いたコードです：

$('.galleryImgs').each(function(){
    $('<img/>')[0].src = $(this).attr("data-src");
});

現在、動的スクリプトを実行できないため、イメージ タグは現在静的です。このコードは機能するはずですか、それとも何か不足していますか?

4

1 に答える 1

3

クロスドメインで動作するかどうかにかかわらず、最初のコメントのアイデアで簡単なスニペットを作成しました。

$(function() {
    //creates an imgcacher hidden element
    $('<div/>', {id: 'imgcacher', style: 'display:none;'}).appendTo('body');
    var cacher = $('#imgcacher'); //caches the cacher selector

    //appends the images to the DOM for caching
    $('.galleryImgs').each(function(){
        $('<img/>', {src: $(this).data('src'), class: "precachedImg"}).appendTo(cacher);
    });

    //clean up the DOM after the images are fully loaded and cached
    $('.precachedImg').promise().done(function() {
        cacher.remove();
    });
});​

デモ
接続が十分に速くない場合、2 番目の画像は 5 秒で読み込むには少し大きすぎるかもしれませんが、少なくとも部分的に読み込まれるはずです。

$.getテストしたとき、Chromeで画像をキャッシュするのにうまくいかなかったので、上記の解決策が私の好みです。私がテストしたすべてのブラウザで、あらゆる接続速度とファイル サイズで問題なく動作します。最新のブラウザーは、画像リソースを 1 回だけ要求し、ページ内の他のすべての複製物と並行して表示します。ajax 要求のように余分な要求を生成することはありません。

また、動的でスケーラブルでクリーンなソリューションです。ただし、シンプルさを好む場合は、display:none最初に DOM に画像を追加するだけでなく、"同じ" エンドユーザー エクスペリエンスが得られます。明らかに、それはDOMを不必要に混乱させるため、上記のスニペットを使用します.

また、少し簡略化したバージョンを次に示します。

$(function() {
    //appends the images to the DOM for caching
    $('.galleryImgs').each(function(){
        $('<img/>', {src: $(this).data('src'), class: 'precachedImg', style: 'display:none;'}).appendTo('body');
    });

    //clean up the DOM as the images are loaded and cached
    $('.precachedImg').load(function() {
        $(this).remove();
    });
});

フィドル

于 2012-07-25T02:54:08.370 に答える