标签：存储 window 距离 defaults 自身 def 数加 高度 网站
对于一个网站来说。访问的时候不应该直接加载所有图片，而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候，在加载更多的图片。叫做图片的懒加载。
通过给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
标签：存储 window 距离 defaults 自身 def 数加 高度 网站
原文地址：https://www.cnblogs.com/widgetbox/p/12988609.html
