//Vue 圖片懶加載
export default (Vue , options = {})=>{
if(!Array.prototype.remove){
Array.prototype.remove = function(item){
if(!this.length) return
var index = this.indexOf(item);
if( index > -1){
this.splice(index,1);
return this
}
}
}
var init = {
lazyLoad: false,
　　default: ‘https://gw.alicdn.com/tps/i1/TB147JCLFXXXXc1XVXXxGsw1VXX-112-168.png‘
}

var listenList = [];
var imageCatcheList = [];

const isAlredyLoad = (imageSrc) => {
if(imageCatcheList.indexOf(imageSrc) > -1){
return true;
}else{
return false;
}
}
//檢測圖片是否可以加載，如果可以則進行加載
const isCanShow = (item) =>{
var ele = item.ele;
var src = item.src;
//圖片距離頁面頂部的距離
var top = ele.getBoundingClientRect().top;
//頁面可視區域的高度
var windowHeight = window.innerHight;
//top + 10 已經進入了可視區域10像素
if(top + 10 < window.innerHeight){
var image = new Image();
image.src = src;
image.onload = function(){
ele.src = src;
imageCatcheList.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 = init.default;
//再看看是否可以顯示此圖片
if(isCanShow(item)){
return
}
//否則將圖片地址和元素均放入監聽的lisenList裏
listenList.push(item);

//然後開始監聽頁面scroll事件
onListenScroll();
}

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

vue 圖片懶加載