Vue实现一个图片懒加载插件

imageCacheList.push(src);
listenList.remove(item);
}
image.onerror = function() {
ele.src = errorImage;
imageCacheList.push(src);
listenList.remove(item);
}
return true;
}else{
return false;
}
};

const onListenScroll = () => {
window.addEventListener('scroll',function(){
var length = listenList.length;
for(let i = 0;i<length;i++ ){
isCanShow(listenList[i]);
}
})

}

//Vue 指令最终的方法
const addListener = (ele,binding) =>{
//绑定的图片地址
var imageSrc = binding.value;

// 防止重复加载。如果已经加载过，则无需重新加载，直接将src赋值
if(isAlredyLoad(imageSrc)){
ele.src = imageSrc;
return false;
}

var item = {
ele: ele,
src: imageSrc
}

//图片显示默认的图片
ele.src = defaultImage;

//再看看是否可以显示此图片
if(isCanShow(item)){
return
}

//否则将图片地址和元素均放入监听的lisenList里
listenList.push(item);

//然后开始监听页面scroll事件
onListenScroll();
}

Vue.directive('lazyload',{
inserted: addListener,
updated: addListener
})
}
}

export default lazyload;

插件的调用：

import Vue from 'vue'
import App from './App'
import router from './router'
import Lazyload from './common/js/lazyload'
// 参数均为可选
Vue.use(Lazyload,{
 scrollDistance: 15, // 距离可视区还有15px时开发加载资源
 defaultImage: '', // 资源图片未加载前的默认图片（绝对路径）
 errorImage:'' // 资源图片加载失败时要加载的资源（绝对路径）
})

参考链接：https://www.jb51.net/article/112355.htm

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。