国外网赚学习

项目EMU教程

关注的频道
QQ:1565238120

js实现前端图片懒加载源码

js实现前端图片懒加载源码,载入 JavaScript 文件,希望对你有帮助,也欢迎各位编程大咖 拍砖。

首页 > 建站 > 程序/文档 > js实现前端图片懒加载源码 第 23 次浏览

js实现前端图片懒加载源码

//——————–JS———————//

使用方法
载入 JavaScript 文件

<script type=”text/javascript”>
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
// 获取图片列表,即img标签列表
var imgs = document.querySelectorAll(‘img’);// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}

// 懒加载实现
function lazyload(imgs){
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h+s)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute(‘data-src’);//只会请求一次
// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
temp.onload = function(){
// 获取自定义属性data-src,用真图片替换假图片
imgs[i].src = imgs[i].getAttribute(‘data-src’)
}
},2000)
})(i)
}
}
}
lazyload(imgs);

// 滚屏函数
window.onscroll =function(){
lazyload(imgs);
}
}

</script>

//——————–html———————//

注意事项:

需要真正实现图片延迟加载,必须将真实图片地址写在 data-src 属性中。若 src 与 data-src 相同,则只是一个特效而已,并不达到延迟加载的功能。

修改 HTML 代码中需要延迟加载的 IMG 标签

<!–
将真实图片地址写在 data-src 属性中,而 src 属性中的图片换成占位符的图片(例如 1×1 像素的灰色图片或者 loading 的 gif 图片)
添加 class=”lazy” 用于区别哪些图片需要延时加载,当然你也可以换成别的关键词。
–>
<img src=”images/lazy.gif” data-src=”product/1.jpg” alt=”” class=”lazy”>

希望对你有帮助,也欢迎各位编程大咖 拍砖。

更新时间: 2022-09-08
本文地址:https://www.lzb6.com/website/program/125.html
置顶