阅读 1295

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

使用懒加载原因

网站中使用图片是必不可少的,尤其是电商网站,举个栗子,一个商品列表最少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))
}
复制代码

看到这里,有的同学会说了,这我不想写怎么办,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>
复制代码

npm链接www.npmjs.com/package/vue…

文章分类
前端
文章标签