图片列表--图片懒加载

对于一个网站来说。访问的时候不应该直接加载所有图片，而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片。叫做图片的懒加载。

通过给img自定义一个新属性，来存储图片真实的src地址，当需要加载的时候，再将这个真实的地址赋给src，进行图片加载。

大体的思路就是：

1.遍历所有的img

2.需要写一个函数来判断当前img是否已经出现在了视野中

3.写一个函数判断当前img是否已经被加载过了

复合上面三条，才写一个加载函数，进行图片加载，代码如下：

src是默认的图片，data-original是真实的src地址

<img class="lazy-load" src="__H5__/market/images/defaults.png" data-original="'+n.cover_id_format+'" >

// 滚动加载
            lazyRender();
            var clock;
            $(window).on('scroll', function(){
                if (clock) {
                    clearTimeout(clock);
                }
                clock = setTimeout(function () {
                    lazyRender();
                },300)
            })
            function lazyRender(){
                $('.img_list1 img').each(function(){
                    if (checkShow($(this)) && !isLoaded($(this)) ){
                        // 写一个checkShow函数来判断当前img是否已经出现在了视野中
                        //写一个isLoaded函数判断当前img是否已经被加载过了
                        loadImg($(this));//符合上述条件之后，再写一个加载函数加载当前img
                        $('.lazy-load').on('error', loadError)
                    }
                    
                })
            }
            function loadError(e){
                this.src="__H5__/market/images/defaults.png";
                this.onerror = null
            }
            function checkShow($img) { // 传入一个img的jq对象
                var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
                var windowHeight = $(window).height(); // 浏览器自身的高度
                var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
                
                if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
                    return true;
                }
                return false;
            }
            function isLoaded ($img) {
                return $img.attr('data-original') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了
            }
            function loadImg ($img) {
                $img.attr('src',$img.attr('data-original')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
            }

$('.lazy-load').on('error', loadError)
这句代码是为了图片地址失效的时候显示默认的图片
这样图片懒加载就可以了

By：ypf