0

ajaxを使用してHTMLのチャンクをロードするページがあります。これらのフラグメントにはすべて画像が含まれ、一部はbackground-imageを使用して別のCSSで指定されます。ロードされたチャンクがすべてのロードが完了したときにのみ表示されるように、プリローダーを作成したかったのです。すべての画像がHTMLチャンクに含まれている場合は、それをロードして非表示の要素に配置し、すべてのimgタグを探して、それらがロードされるかどうかを制御します（または、loadメソッドにいくつかのコールバックを配置します）。問題はCSSです。簡単にそれを行うことはできません...したがって、私の頭に浮かぶ唯一の方法は、すべての画像の場所を含む個別のxmlファイルを用意し、それを使用してIMG要素を作成し、それらをロードすることです。ロードされたチャンクが表示されます（したがって、イメージはすでにサーバーからプルされています）。より良いアプローチを知っていますか？準備ができているコンポーネントはありますか？

4

1 に答える 1

1

アドバイスを受け入れる場合は、このようにしないでください。ここでの優先順位はコンテンツであり、画像は二次的なものです。画像があるため、ユーザーにコンテンツを待たせないでください。特に接続が遅い場合は、お尻が痛くなります。

<img>いくつかのプレースホルダー/インジケーター画像を使用して、読み込み中のコンポーネントに関するフィードバックを提供し、タグ内の画像にいくつかの素晴らしいフェードイン効果を使用することをお勧めします。

注：小さい画像の場合は、データ：URIを試すことができます。これにより、画像をHTMLまたはCSSファイルに埋め込むことができます。

更新しました

ノーと決して言わない。:)これがあなたが使うことができるもののプロトタイプです。FF3以降とIE5.5以降では問題なく動作しますが、何らかの理由でChromeではcssRulesがnullであると表示されます。私はその理由を理解する必要があります。もう1つのTODOは@import、IEで-edルールをマージすることです。これは、標準のルールセットでは機能しないためです。

documentとにかく、ご覧のとおり、a 、aを渡す必要がcallbackあり、オプションの timeout引数があります（デフォルトでは10秒）。

はcallback、すべての画像がドキュメントに読み込まれた後に実行されます。（404で失敗した場合は、スクリプトが処理します）。ここでは、フェードイン、ショー、または何かを行うことができます。

フォールバックとして存在します。timeout何か問題が発生した場合は、一定時間後にコールバックを呼び出します。

// this function will execute a callback after all
// images has been loaded in a document
function imageLoader(document, callback, timeout) {

    timeout = timeout || 10000; // 10s default
    var i, j, remaining = 0;    // number of loading images
    // hash table to ensure uniqueness
    // url => image object
    var imgs = {};

    function handler(el, event) {
        remaining -= 1;
        if (remaining == 0 && !callback.done
         && typeof callback === "function") {
            callback.done = true;
            callback();
        }
    }

    // adds the image to the hash table
    function addImage(src, img) {
        if (!imgs[src]) {
          remaining++;
          img = img || new Image();
          img.onload  = handler;
          img.onerror = handler;
          img.src = img.src || src;
          // add to the hash table
          imgs[src] = img;
        }
    }

    // now gather all those images
    var sheets = document.styleSheets;
    for (i=0; i<sheets.length; i++) {

        // HTML <img> tags
        var els = document.getElementsByTagName("IMG");
        for (i=0; i<els.length; i++) {
            var el = els[i].src;
            addImage(el.src, el);
        }

        // CSS background images
        var css = sheets[i];
        var pos = css.href.lastIndexOf("/");
        var cssDir = (pos != -1) ? css.href.substring(0, pos + 1) : "";
        var rules  = css.cssRules || css.rules;

        for (j=0; j<rules.length; j++) {
            var style = rules[j].style;
            var img = style.backgroundImage;
            if (img == "none") img = "";
            var filename = img.substring(4, img.length - 1).replace(/['"]/g,"");
            if (filename) {
                if (filename.indexOf("http://") != 0
                 && filename.indexOf("/") != 0) {
                    filename = cssDir + filename;
                }
                addImage(filename);
            }
        }
    }

    // correct the start time
    var start = +new Date();

    var timer = setInterval(function(){
        var elapsed = +new Date() - start;
        // if timout reached and callback
        // hasn't been not called yet
        if (elapsed > timeout && !callback.done) {
            callback();
            callback.done = true;
            clearInterval(timer);
        }
    }, 50);
}
于 2010-07-09T09:10:27.137 に答える