什么是图片懒加载?举个例子,如代码狗博客打开后,所有文章缩略图都是一张同样的待加载图片,我的首页一页10篇文章,十篇文章使用同一张图片,当访客访问我的网站时,网页首先加载了网页结构与一张缩略图,这张缩略图会被用到所有文章上,如果其它文章列表不出现在访客视野中,浏览器就不会加载真实的缩略图。这样浏览器就会认为,网页已经加载完毕,事实上图片并没有被加载。当访客滑动网页,缩略图进入浏览器可视区域,就使用JavaScript加载真实缩略图。
图片懒加载原理
利用JavaScript读取进入浏览器可视区域的所有img图片标签,并读取date-src属性值,不一定非得这个属性,也可以是其它属性。我们在写网站后台程序的时候,生成的img标签就不要给src属性真实图片地址,而是使用默认待加载提示图片,将真实图片地址给date-src属性,如下代码形式:
<img date-src="https://www.daimadog.com/logo.png" src="https://www.daimadog.com/1.png"/>
JavaScript懒加载核心代码
lazyRender(); //预防滚动屏幕时重复判断执行 var clock; $(window).on('scroll', function () { if (clock) { clearTimeout(clock); } clock = setTimeout(function () lazyRender(); }, 300) }); //图片是否需要载入判断 function lazyRender() { $('img').each(function () { if (checkShow($(this)) && !isLoaded($(this))) { loadImg($(this)); } }) } //检查图片是否在可视区域 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-src') === $img.attr('src'); //如果data-src和src相等那么就是已经加载过了 } //加载图片 function loadImg($img) { $img.attr('src', $img.attr('data-src')); // 加载就是把自定义属性中存放的真实的src地址赋给src属性 }
注意:很明显这些代码使用了jQuery语法,所以你需要在本段代码之前先载入jQuery,否则会执行错误哟!代码是没有问题的,亲测有效!
原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/241479.html