图片的懒加载，实现步骤
- 在img标签上注入自定义(该例子中为real-src)的图片真实路径，初始可以为loading图片
- 当图片满足一定条件(图片在视口中)时动态替换图片的src
以下是源码↓↓↓↓↓↓
html部分，这里主要讲图片懒加载实现，样式请自行完善
1 <body> 2 <div class="container"> 3 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=123213" alt=""> 4 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=4453" alt=""> 5 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=65854" alt=""> 6 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=6534746" alt=""> 7 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=23426" alt=""> 8 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=466785" alt=""> 9 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=784" alt=""> 10 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=23423" alt=""> 11 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=567567" alt=""> 12 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=67964" alt=""> 13 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=3467" alt=""> 14 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=45846" alt=""> 15 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=3574" alt=""> 16 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=2357" alt=""> 17 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=457456" alt=""> 18 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=457" alt=""> 19 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=235" alt=""> 20 <img src="./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=56865" alt=""> 21 </div> 22 </body>
使用 https://picsum.photos 生成随机图片。https://picsum.photos/500/473表示请求一张500x473的图片，后面必须加上唯一的随机数，不然图片请求只有一张，不能达到我们要的效果。
javascript部分。监听页面滚动事件（防抖处理），判断条件动态修改img的src
<script>
window.onload = function(){
let imgs = document.getElementsByTagName('img');
let len = imgs.length;
let index = 0;
// 初始化
lazyLoad();
// 懒加载（防抖优化）
window.onscroll = debounce(lazyLoad,50);
function lazyLoad(){
// 视口高度
let viewHeight = document.documentElement.clientHeight;
// 滚动高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
for(let i = index;i<len;i++){
// 当图片的 offsetTop 小于视口加上滚动条距离顶部的长度之和 表示图片在视口中
if(imgs[index].offsetTop < viewHeight + scrollTop){
if(imgs[index].getAttribute('src') === './assets/images/loading.jpg'){
imgs[index].src = imgs[index].getAttribute('real-src');
}
index++;
}
}
}
// 防抖
function debounce(fn, wait, immediate = false) {
var timerId = null;
return function () {
let self = this,
args = arguments;
if (timerId) {
clearTimeout(timerId);
}
if (immediate) { //立即执行
let isNow = !timerId;
timerId = setTimeout(() => {
timerId = null;
}, wait);
if (isNow) fn.apply(self, args);
} else {
timerId = setTimeout(() => {
fn.apply(self, args);
}, wait);
}
}
}
}
</script>
posted on
