js画像の読み込み遅延

http://www.qiqiboy.com/2011/04/12/javascript-and-images-lazyload.html
 
 
lazyloadはJS、cssのロードなど、多くの場合に使用できます.ページ上の多くの大きな画像のウェブサイトにとって、画像の遅延荷重は、ページのサイズを節約し、ページとサーバのリソースの相互作用を減らし、ユーザーの待ち時間などを減らすことができます.だから使う人がだんだん多くなりました.
先ほど業務をしていた時、このような需要に出会いました.違いますが、このサイトにはjQueryが紹介されていませんので、他の人が開発したjQuery lazyloadプラグインを使って開発することはできません.自分でコードを書くしかないです.この文はコードを貼って、参考交流とします.コードは基本的に画像lazyloadの需要を実現しましたが、まだいくつかの問題があります.コードに改善の提案と意見があれば、メッセージを歓迎します.
先にデモを見ますができます.コードを見てください.

var addListener=function(e, n, o, u){

    if(e.addEventListener) {

        e.addEventListener(n, o, u);

        return true;

    } else if(e.attachEvent) {

        e['e' + n + o] = o;

        e[n + o] = function() {

            e['e' + n + o](window.event);

        };

        e.attachEvent('on' + n, e[n + o]);

        return true;

    }

    return false;

},

getObjPoint=function(o){

    var x=y=0;

    do {

        x += o.offsetLeft || 0;

        y += o.offsetTop  || 0;

        o = o.offsetParent;

    } while (o);

    return {'x':x,'y':y};

},

IE=function(){

    if(/msie (\d+\.\d)/i.test(navigator.userAgent)){

        return document.documentMode || parseFloat(RegExp.$1);

    }

    return 0;

}

//            ，   lazyload  

var lazyload=function(img){

        if(img.complete||img.readyState&&(

            img.readyState=='loaded'||img.readyState=='complete')

            ){//                

            return false;

        }

        img.setAttribute('_src',img.src);

        img.src='images/nothing.gif';

        //        loading  ，     src：img.removeAttribute('src'); 

        //    src webkit     （safari & chrome）             ，              

        //      src    ，img.src="";                 （IE？）

        var action=function(img){//    

            if(img.getAttribute('loaded')){//    loaded 

                clearInterval(img.timer);

                return;

            }

            var doc=document.documentElement,

                body=document.body,

                sy=(doc&&doc.scrollTop || body&&body.scrollTop || 0) - (doc&&doc.clientTop || body&&body.clientTop || 0),

                np=getObjPoint(img),

                ny=np.y,

                wy=doc&&doc.clientHeight || body&&body.clientHeight;

            //console.log(ny+'|'+sy+'|'+wy)

            if(Math.abs(ny-sy)<wy){

            //                                  

                img.setAttribute('loaded','loaded');//  loaded  ，   img      

                img.src=img.getAttribute('_src');//  src

                img.onload=img.onerror=img.onreadystatechange=function(){

                //IE  onreadystatechange，  onload

                    if(img&&img.readyState&&img.readyState!='loaded'&&img.readyState!='complete'){

                        return false;

                    }

                    img.onload = img.onreadystatechange = img.onerror = null;

                    var animat=function(el){//     fadeIn  

                        var s=0,

                            timer=setInterval(function(){

                            el.style.opacity=s;

                            el.style.filter=('opacity='+(s*100));

                            s+=0.05;

                            if(s>1)clearInterval(timer);

                        },30)

                    }

                    animat(img);

                };

            }

        }

        action(img);

        if(IE()&&IE()<9){

        //ie8        scroll         ,         

            img.timer=setInterval(function(){action(img)},1000);

        }else{

            addListener(window,'scroll',function(){action(img)},false);

        }

    }

DEMO
コードを呼び出して、lazyloadが必要な画像を巡回してlazyloadを呼び出すことができます.具体的にはdemoをダウンロードして確認することができます.
実装原理は、画像を巡回して、画像が既にロードされているかどうかを判断し、またはキャッシュが存在しているかを判断し、ロードされていない場合は、画像のsrcをビット画像に設定し、イベントをバインドすることである.画像がすでに視認領域に入っていることを検出したら、srcを再設定します.
いくつかの疑問があります
第一に、IEの下のバインディングscrollイベントは、多くのバインディングができないようです.一つだけバインディングできます.window.onscrollを使うようになりました.原因は不明です.まだ深く検討していません.しばらくはset Intervalで代替します.
第二に、ブラウザで画像のダウンロードをロードします.もし画像がダウンロードされていて、srcを別のものに設定したら、前の画像は直ちにabortに設定されますか?すべてのブラウザはこのようなものですか?srcを空に設定すると、以前の画像はabortによってロード停止されますか?すべてのブラウザはこうですか?srcを除去しますか?
関連資料があれば、ご提供ください.
2010.4.12 16:20更新: 実際に証明しましたが、上記の疑問の答えはSrcを除去しても、あるいはsrcをリセットしても、ブラウザ(chrome、ff＞4?)をダウンロードする前の写真を止めることができません.だからJS版のlazyloadは無意味です.前と後の組み合わせ(ページ出力前にSrcビットマップを占めるように設定されています)だけが、本当のlazyloadです.
だからみんなはもうそれを使わないでください.意味がありません.本文のコードも無意味です.唯一のハイライトは、写真を読み込む時のfadeIn効果が魅力的です.はははは