js滚动加载

背景

移动web开发中，为了加快响应速度，通常在服务端输出首屏页面，动态异步加载listview。而对于包含大量图片的listview，一起加载将耗费大量http请求，进而影响响应速度。滚动加载这时就可以成为一种可选的优化方案。

要点

• 生成的img标签用一个属性存储图片地址而不是用src
• document.images 获取当前img标签
• isInSight: 是否有元素处于当前可视区域内
• window.addEventListener(‘scroll‘, lazyLoad, false); 监听滚动事件

代码

<!-- lang: js -->
_initScrollEvent: function() {
        var self = this;
        var lazyLoad = self.lazyLoad = function() {

            var imgs = self._getLazyLoadImages();

            imgs.forEach(function(img) {

                if (self._isInSight2(img)) {                        
                    //图片如果出错，则用默认图代替
                    img.addEventListener(‘error‘, function() {
                        img.src = ‘http://cache.500boss.com/mobile/touch/images/leyuan/no_img.png‘
                    })
                    img.src = img.getAttribute(‘osrc‘)
                }
            })
        }
        window.addEventListener(‘scroll‘, lazyLoad, false);
        //try load first page of  imgs
        self._initFirstLoad();
    },

    _initFirstLoad: function() {
        //标签如果附加到body上面，子节点可能对应属性没有添加进来
        //默认执行一次,延迟
        var self = this;
        var interval = setInterval(function() {
            var imgs = self._getLazyLoadImages();
            if (imgs.length) {
                clearInterval(interval);
                self.lazyLoad();
            }
        }, 1)
    },

    _isInSight2: function(el) {
        var top = el.offsetTop;
        var left = el.offsetLeft;
        var width = el.offsetWidth;
        var height = el.offsetHeight;

        while (el.offsetParent) {
            el = el.offsetParent;
            top += el.offsetTop;
            left += el.offsetLeft;
        }

        return (
        top < (window.pageYOffset + window.innerHeight) &&
        left < (window.pageXOffset + window.innerWidth) &&
        (top + height) > window.pageYOffset &&
        (left + width) > window.pageXOffset
        );
    },

    //得到未加载的待lazy图片
    _getLazyLoadImages: function() {
        var self = this;

        var lazyImages = [].filter.call(document.images, function(img) {
            return !!img.getAttribute(‘osrc‘) && img.getAttribute(‘osrc‘).length && (!img.getAttribute(‘src‘) || img.getAttribute(‘src‘).length == 0);
        });
        return lazyImages;
    }

补充

如果在图片未加载成功的时候有一个类似“加载中”的默认图，可以把img包在div，div设置背景加载图作为默认图，等真正图片加载成功就刚好覆盖刚才的背景加载图