在真实图片得到之前,展示懒加载设置的图片
1、安装
cnpm i vue-lazyload -S
2、main.js
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: '图片路径/gif路径/引入图片对象',
attempt: 1
})
3、使用
只需要将:src变成v-lazy即可
<img v-lazy='url'/ >
懒加载原理实现:
<img src="临时加载地址" alt="1" data-src="图片真实地址">
当在浏览器可视区域外,则加载本地的小图片,进入可视区域,则加载属性上保存的真实图片地址
方式一:通过浏览器可视区域高度+已经滑动的距离>图片距离文档顶部的距离,则进行懒加载
方式二:getBoundingClientRect
Top属性代表当前DOM节点距离浏览器窗口顶部的高度,只需判断top值是否小于当前浏览器窗口的高度(window.innerHeight)
若小于说明已经进入用户视野,然后替换为真正的图片即可
代码示例:
<img v-lazy="item2.image" alt="">
懒加载原理参考:
// 获取图片列表,即img标签列表
var imgs = document.querySelectorAll('img');
// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs){
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h+s)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var 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(imgs);
// 滚屏函数
window.onscroll =function(){
lazyload(imgs);
}