使用懒加载原因
网站中使用图片是必不可少的，尤其是电商网站，举个栗子，一个商品列表最少60个商品，每个200K，实际上用户可能看了前面10来张，后面的就不看了，现在来计算一下，50*0.2M=10M，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响页面渲染速度还会浪费带宽。按照刚刚列表计算，并发情况下，达到
1000并发，即同时有1000个人访问，就会产生10个G的带宽。非常amazing啊
好了说了为什么要用，现在开始说怎么实现了
原理
- 一张图片就是一个
标签，浏览器是否发起请求图片是根据
的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给
的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。
思路及实现
- 加载loading图片
- 判断哪些图片要加载(滚动条以上scrollTop+当前内容clientHeight)
- 替换真图片(将data-src中的值给到src，进行请求图片)
html代码
// 先加载的是src中的loading.gif图，真实的图片在data-src(或者其他的里面)未进行加载
<div class="img_list">
<img src="./imgs/loading.gif" data-src="./imgs/imgs1.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs2.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs3.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs4.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs5.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs6.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs7.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs8.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs9.jpg" alt="">
<img src="./imgs/loading.gif" data-src="./imgs/imgs10.jpg" alt="">
</div>
简陋版 js代码
// 必须等到网页DOM加载完后 再实现
window.onload = function(){
// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}
// 简易防抖函数，想要深究可以直接引用npm i -S throttle-debounce
function debounce(wait,fn) {
var timeout = null;
return function() {
if(timeout !== null) clearTimeout(timeout);
timeout = setTimeout(fn, wait);
}
}
// 懒加载实现
function lazyload(){
// 获取图片列表
const imgs = document.querySelectorAll('img');
// 可视区域高度
let height = window.innerHeight;
//滚动区域高度
let top = document.documentElement.scrollTop || document.body.scrollTop;
for(let i=0,length=imgs.length;i<length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((height+top)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源，
//创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
let 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();
// 滚屏函数 添加防抖函数
window.addEventListener('scroll', debounce(100, lazyload))
}
进阶版 js代码
<!-- index.html -->
<img class="lazy" data-src="https://example.com/image.jpg" alt="lazy image" />
<script>
// index.js
// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
// 遍历观察到的目标元素
entries.forEach(entry => {
// 如果目标元素进入视口，则加载图片
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
// 获取所有需要懒加载的图片元素
const lazyImages = document.querySelectorAll('.lazy');
// 遍历所有图片元素，开始观察它们
lazyImages.forEach(img => {
observer.observe(img);
});
</script>
首先，在 HTML 中，我们为需要懒加载的图片添加了一个类名 lazy，并将图片的实际 URL 存储在 data-src 自定义属性中。
接下来，在 JavaScript 中，我们首先创建了一个 IntersectionObserver 实例，使用一个回调函数来处理目标元素与视口的交叉状态变化。在回调函数中，我们首先遍历了所有的 entries，即所有与实例绑定的目标元素。对于每个目标元素，如果它已经进入视口（即 isIntersecting 属性为 true），则我们将其实际 URL 赋值给 src 属性，并停止观察该元素（使用 unobserve 方法）。
最后，我们获取了所有需要懒加载的图片元素，并遍历它们，开始观察它们的交叉状态变化，以便在它们进入视口时加载图片。
看到这里，有的同学会说了，这我不想写怎么办，OK，继续往下看
VUE中直接引用
安装
npm i -S vue-lazyload
main.js中
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../static/goods_default.jpg', // 加载失败或者无资源时显示的图片
loading: '../static/weixin.gif', // loading图片，未加载时显示的
attempt: 1
})
vue页面中
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
