js图片懒加载原理、实现及节流优化

1.懒加载原理

在图片没有进入可视区域时，先给的src一个默认加载的图片，这样浏览器就不会发送请求了，等到图片进入可视区域再把真实的图片路径data-src给src。

2.具体实现

1. 效果

2. 代码如下：

<style>.imgList{width: 600px;}.lazy {width: 600px;}
</style>
<body><div class="imgList"><img class="lazy" src="/image/loading.jpg" data-src="/image/1.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/2.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/3.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/4.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/5.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/6.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/7.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/8.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/9.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/10.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/11.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/1.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/2.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/3.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/4.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/5.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/6.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/7.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/8.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/9.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/10.jpeg" /><img class="lazy" src="/image/loading.jpg" data-src="/image/11.jpeg" /></div>
</body>

<script>window.onload = function () {//onload：等所有资源文件加载完毕以后执行let imgs = document.querySelectorAll('.lazy')function lazyload() {// 可视区域的高度let viewHeight = document.documentElement.clientHeight;// 滚动条滚出去的高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;for (let i = 0; i < imgs.length; i++) {//图片距离文档顶部的距离<滚动条故出去的高度+可视区域的高度（即需要加载的图面滚到可视区域了，就要进行懒加载了）if (imgs[i].offsetTop < viewHeight + scrollTop) {imgs[i].src = imgs[i].getAttribute('data-src')}}}lazyload();//页面一进来时加载//最好给滚动加一个节流函数function thorttle(fn,wait){let timer = nullreturn function(){if(!timer){timer = setTimeout(()=>{fn.call(this)timer = null},wait)}}}// 页面滚动时window.onscroll = thorttle(lazyload,500)}
</script>

js图片懒加载原理、实现及节流优化相关推荐

[js] 图片懒加载
懒加载使用场景在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
js实现图片懒加载原理（marksheng）
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
js实现图片懒加载原理
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
使用jQuery实现图片懒加载原理
在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下 ...
懒加载实践--js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...
js 图片懒加载最好的方法
图片懒加载多种方法第一种是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
html图片懒加载,图片懒加载原理及实现
原理: 先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视 ...
图片懒加载原理及实现
原理: 先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视 ...
js图片懒加载的第二种方式
这种方式是图片按照顺序一张一张的加载直到所有图片都加载完成 html 同样的要让图片进行懒加载,路径引用就得用 data-src <ul><li><img data-sr ...

js图片懒加载原理、实现及节流优化

1.懒加载原理

2.具体实现

js图片懒加载原理、实现及节流优化相关推荐

最新文章

热门文章