图片列表--图片懒加载

Posted 2020-12-06 widgetbox

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

通过给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+‘" >

 1 // 滚动加载
 2             lazyRender();
 3             var clock;
 4             $(window).on(‘scroll‘, function(){
 5                 if (clock) {
 6                     clearTimeout(clock);
 7                 }
 8                 clock = setTimeout(function () {
 9                     lazyRender();
10                 },300)
11             })
12             function lazyRender(){
13                 $(‘.img_list1 img‘).each(function(){
14                     if (checkShow($(this)) && !isLoaded($(this)) ){
15                         // 写一个checkShow函数来判断当前img是否已经出现在了视野中
16                         //写一个isLoaded函数判断当前img是否已经被加载过了
17                         loadImg($(this));//符合上述条件之后，再写一个加载函数加载当前img
18                         $(‘.lazy-load‘).on(‘error‘, loadError)
19                     }
20                     
21                 })
22             }
23             function loadError(e){
24                 this.src="__H5__/market/images/defaults.png";
25                 this.onerror = null
26             }
27             function checkShow($img) { // 传入一个img的jq对象
28                 var scrollTop = $(window).scrollTop();  //即页面向上滚动的距离
29                 var windowHeight = $(window).height(); // 浏览器自身的高度
30                 var offsetTop = $img.offset().top;  //目标标签img相对于document顶部的位置
31                 
32                 if (offsetTop < (scrollTop + windowHeight) && offsetTop > scrollTop) { //在2个临界状态之间的就为出现在视野中的
33                     return true;
34                 }
35                 return false;
36             }
37             function isLoaded ($img) {
38                 return $img.attr(‘data-original‘) === $img.attr(‘src‘); //如果data-src和src相等那么就是已经加载过了
39             }
40             function loadImg ($img) {
41                 $img.attr(‘src‘,$img.attr(‘data-original‘)); // 加载就是把自定义属性中存放的真实的src地址赋给src属性
42             }

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

By：ypf