图片懒加载原理实现及vue的快速引入使用

使用延迟加载的原因

网站中图片的使用是必不可少的，尤其是对于电子商务网站。 例如，产品列表至少有 60 个产品，每个产品 200K。 事实上，用户可能会只看前 10 张左右的图片，而忽略后面的图片。 现在我们来计算一下，50*0.2M=10M，如果页面图片多了，就会加载更多的图片。 服务器的压力就会很大。 不仅影响页面渲染速度还浪费带宽。 按照刚才的列表计算，在并发的情况下，如果达到1000并发，也就是1000人同时访问，就会产生10G的带宽。

好了，说完了为什么用，我们来说说如何实现。

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//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
			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代码

<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自定义属性中。

接下来，在 中，我们首先创建一个实例，并使用回调函数来处理目标元素和视口之间的跨状态变化。 在回调函数中，我们首先遍历所有，即实例绑定的所有目标元素。 对于每个目标元素，如果它已进入视口（即属性为 true），我们将其实际 URL 分配给 src 属性并停止观察该元素（使用该方法）。

最后，我们获取所有需要延迟加载的图像元素，并对它们进行迭代，并开始观察它们的交叉状态变化，以在它们进入视口时加载图像。

看到这里，有的同学会说了，这我不想写怎么办，OK，继续往下看
复制代码

直接参考VUE中安装

npm i -S vue-

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>
复制代码

npm 链接...