みかづきブログ その3

3ヶ月つづけてみました。

JavaScriptで画像の読み込み終了を検知する

サイトで表示する画像を事前に読み込んでおいて、高速化しようと思ったときに書いたコードです。
1px × 1pxの大きさでよみ読み込んでますが、CSS側でうまく隠すことを前提としています。
プリロード用なので読み込みが終わった画像はドキュメントから削除していますが、最後の1枚のレンダリングにかかる時間を考慮して0.5秒待ってから削除しています。


JavaScript

(function(win, doc, ns) {

    "use strict";

    function watch(imgSrcList, callback) {
        var length = imgSrcList.length,
            i = length,
            count = 0,
            imgList = [],
            img,
            MS = 500;
        
        while(i) {
            --i;
            img = new Image;
            doc.body.appendChild(img);
            img.width = img.height = 1;
            img.onload = _count;
            img.src = imgSrcList[i];
            imgList.push(img);
            img = null;
        }

        function _count() {
            // すべての画像の読み込みが終わったら画像を削除
            setTimeout(function() {
                var _this = this,
                    i = length;
    
                if (++count === length) {
                    while (i) {
                        doc.body.removeChild(imgList[--i]);
                   }
                    callback();
                }
            }, MS);
        }  
    }

    ns.LoadManager = {
        watch: watch
    };

})(this, document, App);

DEMO