图片列表--图片懒加载
Posted widgetbox
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片列表--图片懒加载相关的知识,希望对你有一定的参考价值。
对于一个网站来说。访问的时候不应该直接加载所有图片,而是应该只讲浏览器窗口内的图片进行加载。当滚动的时候,在加载更多的图片。叫做图片的懒加载。
通过给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
以上是关于图片列表--图片懒加载的主要内容,如果未能解决你的问题,请参考以下文章