11

要するに、私は非常に大きなフォト ギャラリーを持っており、最初のページが読み込まれたときにできるだけ多くのサムネイル画像をキャッシュしようとしています。1000以上のサムネイルが存在する可能性があります。

最初の質問 -- そんなにたくさんプリロード/キャッシュしようとするのはばかげていますか?

2 番目の質問preload()です。関数が起動すると、ブラウザ全体が 1 ～ 2 分間応答を停止します。その時点でコールバックが発生し、プリロードが完了します。この多くのオブジェクトを読み込もうとするときに、ユーザー エクスペリエンスや速度を妨げない「スマート プリロード」を実現する方法はありますか?

$.preLoadImages関数はここから取得されます: http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html

これが私がそれを実装する方法です：

$(document).ready(function() {
    setTimeout("preload()", 5000);
});
function preload() {
    var images = ['image1.jpg', ... 'image1000.jpg'];
    $.preLoadImages(images, function() { alert('done'); });
}

1000枚の画像はたくさんあります。求めすぎですか？

4

2 に答える 2

6

そのプリロード スクリプトを調べたところ、スクリプトは次のイメージに移る前に 1 つのイメージがロードされるのを待たないように見えます。これがブラウザがハングする原因だと思います。基本的に、ブラウザに 100 個の画像を同時にロードするように指示しているのです。

より良い方法は、再帰関数を使用して、最初の画像が完了した後にのみ次の画像の読み込みを開始することです。これは私がまとめた簡単な例です。

編集:これにより、スタック オーバーフロー エラーが発生します。以下の新しいバージョンを参照してください。

var preLoadImages = function(imageList, callback) {
    var count = 0;
    var loadNext = function(){
        var pic = new Image();
        pic.onload = function(){
            count++;
            if(count >= imageList.length){
                callback();
            }
            else{
                loadNext();
            }
        }
        pic.src = imageList[count];
    }
    loadNext();
};

$(document).ready(function(){
    var files = ['file1,jpg', 'file2.jpg'];
    preLoadImages(files, function(){ alert("Done!"); });
});

繰り返しますが、ここで重要なことは、ブラウザに一度に 1 つの画像のみをダウンロードさせるようにすることです。それ以上だと、すべてが完了するまでブラウザがロックされる危険があります。

--

編集：再帰なしの新しいバージョン。これを 1000 個以上の項目配列でテストしましたが、エラーは発生しませんでした。私の考えは、再帰を間隔とブール値に置き換えることでした。50 ミリ秒ごとに関数をポーリングし、「何かロードしていますか?」と尋ねます。答えが「いいえ」の場合は、先に進み、次の画像を待ち行列に入れます。これは、すべてが完了するまで何度も繰り返されます。

var preLoadImages = function(imageList, callback) {
    var count = 0;
    var loading = false;
    var loadNext = function(){
        if(!loading){
            loading = true;
            count++;
            pic = new Image();
            pic.onload = function(){
                loading = false;
                if(count >= imageList.length-1){
                        clearInterval(loadInterval);
                        callback();
                }
            }
            pic.src = imageList[count];
        }
    }
    var loadInterval = window.setInterval(loadNext, 50);
};

他の多くのことが行われている完全なWebページで、これがパフォーマンスに関してどのようになるか、私はまだ興味があります. それがどうなるか教えてください。

于 2010-06-15T03:56:00.840 に答える
0

これは興味深いパフォーマンスの問題です。すべてをプリロードすると、Firebug または Chrome 開発者ツールでどのように動作しますか? これは、これがLazy Load Pluginの良い使い方だと思います。

Lazy loader は JavaScript で書かれた jQuery プラグインです。(長い) Web ページの画像の読み込みが遅くなります。ビューポート (Web ページの表示部分) の外側にある画像は、ユーザーがスクロールする前に読み込まれません。これは、イメージのプリロードの反対です。

于 2010-06-15T03:53:58.207 に答える