javascript图片按需加载(滚动加载)的实现

function ImagesDelay(container) {
    //离屏幕下方50像素内的图片加载
    var minBottom = 50;
    var srcData = new Array();
    var waitingUrl = "";
    var lastBottomX = 0;

    //will server do
    //Replace src
    var imgs = $(container).find("img");
    var id = 0;
    imgs.each(function () {
        id++;
        var rect = this.getBoundingClientRect();
        $(this).attr("ld", "l" + id);
        srcData[srcData.length] = { "ld": "l" + id, "src": $(this).attr("src"), "rect": rect };
        $(this).attr("src", waitingUrl);
    });
    $(window).scroll(function () {
        LoadImages();
    });
    // do first loading
    LoadImages();

    function CalcRact() {
        for (var i = 0; i < srcData.length; i++) {
            var imgs = $(container).find("img[ld=" + srcData[i].ld + "]");
            if (imgs.length > 0) {
                srcData[i].rect = imgs[0].getBoundingClientRect();
            }
        }
    }

    function LoadImage(img, src) {
        var appname = navigator.appName.toLowerCase();
        if (appname.indexOf("netscape") == -1) {
            //ie
            img.onreadystatechange = function () {
                if (img.readyState == "complete") {
                    CalcRact();
                }
            };
        } else {
            //firefox
            img.onload = function () {
                if (img.complete == true) {
                    CalcRact();
                }
            }
        }
        img.src = src;
        if (img.width > 0 && img.complete) {
            CalcRact();
        }
    }

    function LoadImages() {
        var bottomX = $(window).height() + $(window).scrollTop();
        if (lastBottomX != bottomX) {
            lastBottomX = bottomX;
            var needData = GetNeedLoadImgs(bottomX);
            for (var i = 0; i < needData.length; i++) {
                var imgs = $(container).find("img[ld=" + needData[i].ld + "]");
                if (imgs.length > 0) {
                    LoadImage(imgs[0], needData[i].src);
                }

            }
        }
    }

    function GetNeedLoadImgs(bottomX) {
        var x = bottomX + minBottom;
        var result = new Array();
        var needLoad = new Array();
        for (var i = 0; i < srcData.length; i++) {
            var rect = srcData[i].rect;
            if (x >= rect.top) {
                result[result.length] = srcData[i];
            } else {
                needLoad[needLoad.length] = srcData[i];
            }
        }
        srcData = needLoad;
        return result;
    }
}

<div id="gb_container">

</div>

<script type="text/javascript">

    var s = new ImagesDelay("#gb_container");

</script>