1.什么是图片懒加载
图片懒加载就是鼠标滑动到哪里，图片加载到哪里。总的来说，一般页面打开，会同时加载页面所有的图片，如果页面的图片请求太多会造成很卡很慢的现象，为了避免这一现象，利用懒加载图片的方法，提高性能（典型：淘宝）
2. 实现图片懒加载的原理
图片懒加载的实现原理：将图片的地址放在data-set属性中，由于图片并没有在src中，并不会发送http请求。比较图片到整个页面距离（Y）和 页面滑动的距离 （X） + 浏览器可视区域的大小(Z) ，Y小于两者之和，则图片就显示出来，将图片的data-set属性换为src属性
3. Vue的图片懒加载实现
Vue的图片懒加载很简单
（1） 下载插件 npm install vue-lazyload --save 或 yarn add vue-lazyload
（2） main.js 引入插件
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)
或
Vue.use(VueLazyload, {
preLoad: 1.3, // 提前加载高度（数字 1 表示 1 屏的高度） 默认值:1.3
error: 'dist/error.png', // 当加载图片失败的时候
loading: 'dist/loading.gif', // 图片加载状态下显示的图片
attempt: 3 // 加载错误后最大尝试次数 默认值:3
})
(3)在组件中使用：
对于img
v-lazy="'/static/img/product/' + productshow1"
// productshow1为路径地址，直接将变量写在data中使用 data: () =>{productshow1:"productshow1.png" }
对于背景图片
v-lazy:backgroundImage = "showMessage.imageUrl" //showMessage.imageUrl为变量名，图片的地址
4.jquery 实现图片懒加载
jquery实现主要是依赖了lazyload.js
（1）引入插件
<script src="jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
（2）使用
// 最简单的使用，不带参数
$('img').lazyload();
// 带参数(配置对象)，下面配置对象中的各个属性值都是默认的
$('img').lazyload({
threshold : 0, //图片距离可视窗口的距离为多少px开始加载图片
failure_limit : 3, //img加载失败到第4张开始停止加载图片
event : “scroll”, //触发事件
effect : “show”, //显示方式
container : window, //容器
data_attribute : “original”, //属性
skip_invisible : true, //不进行加载隐藏的图片
appear : null, //在img触发appear事件时执行的回调
load : null, //在img触发load事件时执行的回调
placeholder:"data:image/png;base64,,,,," // 图片占位符
});
5.原生js实现图片懒加载
获取到所有需要用到的高度，和加载的图片，修该data-set 属性实现懒加载
html部分
<img data-set ="img/one.jpg" src ="">
<img data-set ="img/two.jpg" src ="">
<img data-set ="img/three.jpg" src ="">
<img data-set ="img/four.jpg" src ="">
<img data-set ="img/five.jpg" src ="">
javaScript部分
<script type="text/javascript>
var imgs = document.querySelectorAll("img"); //获取所有的img元素
window.onscroll = function(){ //定义触发事件
var showViewH = document.documentElement.clientHeight; //获取可视区域的高度
//获取滚动的高度（兼容性写法）
var scrollH = document.body.scrollTop || document.documentElement.scrollTop;
for(var i =0 ; i<imgs.length;i ++){
//判断图片到页面的高度与可视高度和滑动高度的大小
if (imgs[i].offsetTop < showViewH + scrollH ) {
if (imgs[i].getAttribute('src') == '') {
imgs[i].src = imgs[i].getAttribute('data-set');
}
}
}
