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：

var lazyLoad = (function (args) {
        var defaults = (arguments.length == 0) ? { src: ‘xxx‘, time: 100} : { src: args.src || ‘xxx‘, time: args.time ||100};
        var camelize = function (s) {
            return s.replace(/-(\w)/g, function (str, 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.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 () {
                    _init();
            };
        };
        return _init();
    });
    lazyLoad({
        src:"imgSrc",
        time:100
    });