延时加载

现在延迟加载是在拖动滚动条的时候  加载后面的图片   cloudgamer 前辈写的一个  http://www.cnblogs.com/cloudgamer/  非常好
http://www.tmall.com/ 大家看下这个效果我要的就是类似的效果  向下拉的同时下面的内容也开始了加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>聂微东-页面滚动图片加载</title>
<style>
body{text-align:center;}
.list{margin-bottom:40px;}
</style>
</head>
<body>
<div>
    <div>
        <h1>聂微东-页面滚动图片加载</h1>
        <div>这些书本人大多都看过，其中几本是前端必看，想了解可以去本人以前的文章 - <a target="_blank" href="http://www.cnblogs.com/Darren_code/archive/2011/06/29/javascript-learn.html">《说说我的web前端之路,分享些前端的好书》</a>看看。<br /><br />最后一本目前正在看，有种看小说的感觉，看的很过瘾，推荐给大家..</div><br /><br />
        <div id="content">
<script type="text/javascript">
    var main = "";
    for (var i = 1; i < 21; i ++) {
        main += '<div class="list"><img class="scrollLoading" xSrc="http://images.cnblogs.com/cnblogs_com/Darren_code/311197/o_' + i + '.jpg" src="http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_pixel.gif" width="200" height="250" style="background:url(http://images.cnblogs.com/cnblogs_com/Darren_code/302725/o_108.gif) no-repeat center;" /><br />图片' + i + '</div>';
    }
    document.getElementById("content").innerHTML = main;
</script>
        </div>
    </div>
</div>
<script type="text/javascript">
   var scrollLoad = (function (options) {
       var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 60} : { src: options.src || 'xSrc', time: options.time ||60};
        var camelize = function (s) {//修改属性名称,        如把text-align(ie)转化为textAlign(ff)
           /*return s.replace(/-(\w)/g, function (strMatch, p1) {//strMatch是什么？？其实上面的strMatch值为-r，就是与正则匹配的字符串（该函数的第一个参数是匹配模式的字符串），上面的p1的值是r，指的是紧接着-后面的r（接下来的参数是与模式中的子表达式匹配的字符串），就是我们规定的索引——“(\w)”。
                return p1.toUpperCase();
            });
*/
          //var s1=s.replace(/-(\w)/g,"$1");
  //return s1.toLowerCase();
  return s;//其实也无必要修改属性名！！
        };
        this.getStyle = function (element, property) {//获取元素的属性值
            if (arguments.length != 2) return false;
            var value = element.style[camelize(property)];
            if (!value) {
                if (document.defaultView && document.defaultView.getComputedStyle) {
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(property) : null;
                } else if (element.currentStyle) {
                    value = element.currentStyle[camelize(property)];
                }
            }
            return value == 'auto' ? '' : value;//判断是否是系统默认？？
        };
        var _init = function () {
            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,//只有N/S浏览器拥有pageYOffset属性,FF浏览器也可以
                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),//当网页没有占满整个窗口时,这时要得到高度和宽度
//在IE下：document.documentElement.clientHeight
//在其它浏览器下：window.innerHeight
//offsetPage=滚动条距离页面顶部距离，offsetWindow=当前页面底部距离网页顶部的绝对距离！
                docImg = document.images,//获取页面所有图像，数组
                _len = docImg.length;//图像个数！！！
            if (!_len) return false;
            for (var i = 0; i < _len; i++) {
                var attrSrc = docImg[i].getAttribute(defaults.src),//每个图像的src地址
                    o = docImg[i], tag = o.nodeName.toLowerCase();
                if (o) {
                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop+ window.document.body.scrollTop;//window.document.documentElement.scrollTop 和 window.document.body.scrollTop浏览器只有一个有效！！另外一个为0.
//postPage=图片顶部距离页面顶部高度，绝对。
postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));//将”100px“转换为100
//postWindow=图片底部距页面顶部高度
                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {
                        if (tag === "img" && attrSrc !== null) {//判断符号注意使用===和！==
                            o.setAttribute("src", attrSrc);
                        }
                        o = null;
                    }
                }
            }
            window.onscroll = function () {
                setTimeout(function () {_init();}, defaults.time);
            };
        };
        return _init();
    });
    scrollLoad();//只能放在函数定义后 /*var scrollLoad = (function (options) {
        var defaults = (arguments.length == 0) ? { src: 'xSrc', time: 100} : { src: options.src || 'xSrc', time: options.time ||100};
        var camelize = function (s) {
            return s.replace(/-(\w)/g, function (strMatch, p1) {
                return p1.toUpperCase();
            });
        };
        this.getStyle = function (element, property) {
            if (arguments.length != 2) return false;
            var value = element.style[camelize(property)];
            if (!value) {
                if (document.defaultView && document.defaultView.getComputedStyle) {
                    var css = document.defaultView.getComputedStyle(element, null);
                    value = css ? css.getPropertyValue(property) : null;
                } else if (element.currentStyle) {
                    value = element.currentStyle[camelize(property)];
                }
            }
            return value == 'auto' ? '' : value;
        };
        var _init = function () {
            var offsetPage = window.pageYOffset ? window.pageYOffset : window.document.documentElement.scrollTop,
                offsetWindow = offsetPage + Number(window.innerHeight ? window.innerHeight : document.documentElement.clientHeight),
                docImg = document.images,
                _len = docImg.length;
            if (!_len) return false;
            for (var i = 0; i < _len; i++) {
                var attrSrc = docImg[i].getAttribute(defaults.src),
                    o = docImg[i], tag = o.nodeName.toLowerCase();
                if (o) {
                    postPage = o.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop; postWindow = postPage + Number(this.getStyle(o, 'height').replace('px', ''));
                    if ((postPage > offsetPage && postPage < offsetWindow) || (postWindow > offsetPage && postWindow < offsetWindow)) {
                        if (tag === "img" && attrSrc !== null)
                            { o.setAttribute("src", attrSrc);}
                        o = null;
                       }
                }
            }
            window.onscroll = function () {
                setTimeout(function () {
                    _init();
                }, defaults.time);
            }
        };
        return _init();
    });
scrollLoad();
*/
</script>
</body>
</html> 好不容易在电脑里翻出来。。

解决方案 »