为啥要实现懒加载??好处是什么?图片懒加载的原理??
程序员文章站
2024-03-18 10:04:46
...
我们之前看到的懒加载一般是这样的形式:
. 浏览一个网页,准备往下拖动滚动条
. 拖动一个占位图片到视窗
. 占位图片被瞬间替换成最终的图片
原因:
比如一个页面中有很多图片,如淘宝、京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了。更为要命的是:一上来就发送百八十个请求,服务器可能就吃不消了(又不是只有一两个人在访问这个页面)。
因此优点就很明显了:不仅可以减轻服务器的压力,而且可以让加载好的页面更快地呈现在用户面前(用户体验好)。
原理:
主要实现思路:
如果滚动的大小和屏幕高度之和大于元素到顶部的距离,设置一个定时器,制造懒加载的延迟加载的效果,也就是说,当我们滑动滚动条,看见图片的时候,就让它加载出来
<img src="/image/8.jpg" data-src="/image/1.png" alt="">
<img src="/image/8.jpg" data-src="/image/2.png" alt="">
<img src="/image/8.jpg" data-src="/image/3.png" alt="">
<img src="/image/8.jpg" data-src="/image/4.png" alt="">
<img src="/image/8.jpg" data-src="/image/5.png" alt="">
<img src="/image/8.jpg" data-src="/image/6.png" alt="">
<img src="/image/8.jpg" data-src="/image/7.png" alt="">
js,主要是用jquery实现的
$(window).scroll(handleScroll)
function handleScroll() {
let imgs = $('img[data-src]');
console.log(imgs)
//获取滚动的值
let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTop
console.log(bodyScrollHeight)
//获取可视高度(屏幕高度)
let windowHeight = window.innerHeight
console.log(windowHeight)
for (let i = 0; i < imgs.length; i++) {
// 获取元素到浏览器顶部的距离
let imgHeight = $(imgs[i]).offset().top
// console.log(imgHeight)
// 如果滚动的大小和屏幕高度之和大于元素到顶部的距离
if (imgHeight < windowHeight + bodyScrollHeight) {
//setTimeout:设置一个定时器,制造懒加载的延迟加载的效果
setTimeout(function () {
$(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))
}, 1000)
}
}
}
handleScroll()
你们还有那些比较简单的实现思路呢???
上一篇: 使用python3爬取你喜欢的小说
下一篇: ELK 7.6.2 安装文档