javascript页面滚动图片加载

图片量越来越大，网页加载不堪重负。还是得用lazyload...

实现要点：页面绑定滚动事件；加载页面的时候把地址放于一个属性中；在滚动过程中判断元素是否进入显示的区域内；加载图片。

主要相关问题：浏览器兼容，如获取浏览器可见部分的宽度：

window.innerHeight || document.documentElement.clientHeight

获得页面相对可见部分的左上角的竖直方向的坐标：

window.pageYOffset || window.document.documentElement.scrollTop

获取页面元素的位置：

element.getBoundingClientRect().top + window.document.documentElement.scrollTop + window.document.body.scrollTop

图片加载：需要先把图片的真实地址放在图片元素的一个属性里面，真实的src存放一个很小的透明图片。在加载的时候，最好有个提示让用户可以清楚的看到图片在加载。

使用jQuery，可以比较清晰的看到实现的思路：

$(window).scroll(function() {
    var _scrollTop = $(this).scrollTop();   //当前滚动条的位置
    $('img').each(function() {
        var _top = $(this).offset().top;    //这个img距离页面顶部的高度
        var _height = $(window).height();    //窗口高度
        if(_scrollTop + _height * 0.5 > _top) {    //当img的元素出现在窗口中央
            $(this).lazyload();
        }
    });
});

原生JS：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<img src="cute.jpg" data-src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=229a9a9a7e3e6709aa0d4dad5aaef458/ac6eddc451da81cbbcc7e5705366d0160924316d.jpg"   alt="butterfly" />
<img src="cute.jpg" data-src="http://h.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=289326faa1ec08fa320d1bf538875608/95eef01f3a292df53f6e2e50bd315c6035a873c2.jpg"   alt="butterfly" />
<img src="cute.jpg" data-src="http://h.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=289326faa1ec08fa320d1bf538875608/95eef01f3a292df53f6e2e50bd315c6035a873c2.jpg"   alt="butterfly"/>
<img src="cute.jpg"  data-src="http://h.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=289326faa1ec08fa320d1bf538875608/95eef01f3a292df53f6e2e50bd315c6035a873c2.jpg"  alt="butterfly"/>
<img src="cute.jpg" data-src="http://c.hiphotos.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=94e1f42b9f510fb36c147fc5b85aa3f0/8326cffc1e178a82cb2dc532f703738da977e80b.jpg"   alt="butterfly"/>
<img src="cute.jpg" data-src="http://g.hiphotos.baidu.com/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=803d40c6d1160924c828aa49b56e5e9f/6a63f6246b600c33b184f9581b4c510fd8f9a1a4.jpg"  alt="butterfly"/>
<img src="cute.jpg" data-src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=229a9a9a7e3e6709aa0d4dad5aaef458/ac6eddc451da81cbbcc7e5705366d0160924316d.jpg"   alt="butterfly" />
<img src="cute.jpg" data-src="http://h.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=289326faa1ec08fa320d1bf538875608/95eef01f3a292df53f6e2e50bd315c6035a873c2.jpg"   alt="butterfly" />
<img src="cute.jpg" data-src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=229a9a9a7e3e6709aa0d4dad5aaef458/ac6eddc451da81cbbcc7e5705366d0160924316d.jpg"   alt="butterfly" />
<img src="cute.jpg" data-src="http://h.hiphotos.baidu.com/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=289326faa1ec08fa320d1bf538875608/95eef01f3a292df53f6e2e50bd315c6035a873c2.jpg"   alt="butterfly" />
<img src="cute.jpg" data-src="http://f.hiphotos.baidu.com/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=229a9a9a7e3e6709aa0d4dad5aaef458/ac6eddc451da81cbbcc7e5705366d0160924316d.jpg"   alt="butterfly" />
<script type="text/javascript">
var lazyLoad = (function () {       
        this.getStyle = function (element, property) {
            if (arguments.length != 2) return false;
            var value = element.style[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[property];
                }
            }
            return value == 'auto' ? '' : value;
        };
        var init = function () {
            var offsetPage = 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("data-src"),
                    o = docImg[i], tag = o.nodeName.toLowerCase();
                if (o) {
                    var 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) {
                          if(attrSrc != o.src){
                            o.setAttribute("src", attrSrc);
                          }
                        }
                        o = null;
                    }
                }
            };
            window.onscroll = function () {
                    init();   
            };
        };
        return init();
    });
    lazyLoad();  
</script>
</body>
</html>

posted on 2015-01-20 20:06 清姿阅读(350) 评论(0) 编辑收藏举报