图片懒加载

图片懒加载

前言

​ 在项目的后期性能优化的过程中，对于部分图片的加载需要使用懒加载来实现，当然，对于图片也可以使用精灵图（雪碧图）来减少请求来优化。对于网站的性能优化来说，使用图片的懒加载可以很好的提高体验效果。

了解图片懒加载

了解懒加载的特点：

1. 可以有效减少无用的资源的加载，减少浏览器的负担
2. 提升用户的体验效果，对于很多图片来说，加载的时间就会变的很长，体验效果很差

针对多个图片我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，实现图片的按需加载，也可以依赖其他的包来实现懒加载的效果。

原生实现懒加载

思路：

对于图片的懒加载，我们可以在浏览器滚动的时候，滑到一定的距离再加载图片，这样就可以简单实现懒加载了，对于这一步分的距离我们需要通过JavaScript来控制，所以我们需要了解一些数值：

1. window.innerHeight 是浏览器可视区的高度
2. document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离
3. xx.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）

我们需要满足条件：xx.offsetTop < window.innerHeight + document.body.scrollTop

系列代码实现：

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		var winHeight= window.innerHeight;
		for(var i=0;i < imgs.length;i++){
			if(imgs[i].offsetTop < scrollTop + winHeight ){
				imgs[i].src = imgs[i].getAttribute('data-src');
			}
		}
	}
  window.onscroll = lozyLoad;
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在vue实现图片懒加载

在vue的项目里面我们需要实现图片懒加载的话可以依赖一些包来完成，安装包：

npm install vue-lazyload --save
1

引入使用

在main.js里面引入，再配置：

// 引入
import VueLazyLoad from 'vue-lazyload'
// 配置使用
Vue.use(VueLazyLoad,{
    error:'/img.jpg',                    //报错时需要的图片
    loading:'/img/jpg'				     //加载时需要的图片
})
1
2
3
4
5
6
7

在需要的页面使用说明：

//  vue文件中将需要懒加载的图片绑定 v-bind:src 换成 v-lazy 
<img v-lazy="item.img"/>
1
2