原生js实现图片列表懒加载和截流
Posted ༺初辰༻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现图片列表懒加载和截流相关的知识，希望对你有一定的参考价值。
为什么图片列表要用懒加载？
- 1 增强用户体验
- 2 优化代码
- 3 减少http的请求
- 4 减少服务器端压力
- 5 服务器的按需加载
- 6 提升页面第一次加载的速度
代码
// 懒加载实现
function lazyload(imgs) {
var h = window.innerHeight;
var s = document.documentElement.scrollTop
for (var i = 0; i < imgs.length; i++) {
if ((h + s) > getTop(imgs[i])) {
if (imgs[i].src != imgs[i].getAttribute('data-src')) {
imgs[i].src = imgs[i].getAttribute('data-src')
}
}
}
}
为什么要用截流？
- 1 增强用户体验
- 2 优化代码
- 3 减少事件请求频率
代码
//截流
function throttle(fn, interval = 500) {
let timer = null
return function () {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, interval)
}
}
配合截流和懒加载以实现最佳的用户体验和网站性能
效果图
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<ul>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/06/16/21/46/parrot-6342271__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/06/20/08/28/wheat-grass-6350274__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2019/08/08/11/42/butterfly-4392802__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2018/07/04/11/58/xiamen-3515964__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2019/08/17/04/18/morning-4411421__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/05/28/11/39/girl-6290663__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/05/27/20/53/field-6289253__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/02/07/15/47/reed-5991717__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/01/28/18/21/beach-5958718__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2020/10/12/22/15/glass-5650335__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2021/04/22/15/46/landscape-6199355__340.jpg" alt="">
</li>
<li>
<img src="https://z3.ax1x.com/2021/06/23/RuU4KK.gif"
data-src="https://cdn.pixabay.com/photo/2019/11/19/22/23/cat-4638664__340.jpg" alt="">
</li>
</ul>
<script>
window.addEventListener('DOMContentLoaded', function () {
// 获取图片列表，即img标签列表
var imgs = document.querySelectorAll('img');
// 初始化页面图片
lazyload(imgs);
// 滚屏事件
window.onscroll = throttle(() => {
lazyload(imgs)
}, 600)
// 获取到浏览器顶部的距离
function getTop(e) {
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs) {
var h = window.innerHeight;
var s = document.documentElement.scrollTop
for (var i = 0; i < imgs.length; i++) {
if ((h + s) > getTop(imgs[i])) {
if (imgs[i].src != imgs[i].getAttribute('data-src')) {
imgs[i].src = imgs[i].getAttribute('data-src')
}
}
}
}
//截流
function throttle(fn, interval = 500) {
let timer = null
return function () {
if (timer) return
timer = setTimeout(() => {
fn.apply(this, arguments)
timer = null
}, interval)
}
}
})
</script>
</body>
</html>
以上是关于原生js实现图片列表懒加载和截流的主要内容，如果未能解决你的问题，请参考以下文章