转：
Vue图片懒加载原理和实现
Vue 中实现图片预加载 + 懒加载原理实现
Vue图片懒加载原理及实现
原理分析
先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可视窗口时，再将实际地址应用。
实现方法
1.判断元素是否在可视范围
1
2
3
4
5
6
7
8
9
10
11
12
| /**
* 判断元素是否在可视范围
*/
function isVisible(ele){
let windowHeight = window.innerHeight
let position = ele.getBoundingClientRect()
// 当元素的top偏移量小于页面大小并且大于高度的负数
if(position.top<windowHeight && position.top>-position.height){
return true
}
return false
}
|
2.对图片实现懒加载
1
2
3
4
5
6
7
8
9
10
| /**
* 对图片进行懒加载
*/
function lazyLoad(img, src){
if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
setTimeout(function(){
img.setAttribute('src', src)
}, 1000) // 模拟网络请求
}
}
|
3.添加滚动监听
1
2
3
4
| // 窗口滚动
window.addEventListener('scroll', function(){
lazyLoad(img, src)
})
|
Vue插件实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| /**
* 判断元素可见
*/
function isVisible(el){
let windowHeight = window.innerHeight
let position = el.getBoundingClientRect()
// 当元素的top偏移量小于页面大小并且大于高度的负数
if(position.top<windowHeight && position.top>-position.height){
return true
}
return false
}
/**
* 对图片进行懒加载
*/
function lazyLoad(img, src){
if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
setTimeout(function(){
img.setAttribute('src', src)
}, 1000) // 模拟网络请求慢的情况
}
}
export default {
install(Vue, options){
Vue.directive('lazy', {
bind: function(el, binding, vnode){
el.setAttribute('src', options.loading)
window.addEventListener('scroll', function(){
lazyLoad(el, binding.value)
})
},
inserted: function(el, binding, vnode){
lazyLoad(el)
}
})
}
}
|
main.js
Vue.use(myPlugin, {loading: defaultImg})
在Vue中使用 vue-lazyload插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| 1.安装插件
npm install vue-lazyload --save-dev
2.在入口文件main.js中引入并使用
import VueLazyload from 'vue-lazyload'
直接使用
Vue.use(VueLazyload)
或者添加自定义选项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
3.修改图片显示方式为懒加载（将 :src 属性直接改为v-lazy）
<a href="javascript:;">
<img v-lazy="'/static/img/' + item.productImage">
</a>
|
评论和共享
