在Vue開(kāi)發(fā)中，加載圖片是一個(gè)非常常見(jiàn)的需求。但是我們往往會(huì)遇到一個(gè)問(wèn)題，就是在大量加載圖片時(shí)，會(huì)出現(xiàn)長(zhǎng)時(shí)間的等待，這就需要我們使用Vue img loading。Vue img loading 可以讓我們?cè)诩虞d圖片時(shí)，顯示一個(gè)loading動(dòng)畫(huà)，從而給用戶更好的體驗(yàn)。

在Vue項(xiàng)目中使用Vue img loading非常簡(jiǎn)單，我們可以使用Vue的指令來(lái)實(shí)現(xiàn)。下面是Vue img loading的使用方法：

Vue.directive('imgLoading',{
bind:function(el,binding){
let img=new Image();
img.src=binding.value;
el.style.backgroundImage='url(http://ohz2cps5f.bkt.clouddn.com/loading.gif)';
el.style.backgroundSize='100% 100%';
img.onload=function(){
el.style.backgroundImage='url('+binding.value+')';
}
}
})

上面的代碼中，我們使用了Vue的指令來(lái)綁定我們的Vue img loading。這個(gè)指令有一個(gè)bind函數(shù)，這個(gè)函數(shù)會(huì)在指令綁定到元素上時(shí)調(diào)用。在bind函數(shù)中，我們創(chuàng)建了一個(gè)新的圖片對(duì)象，并設(shè)置了圖片的src。然后我們將元素的背景圖片設(shè)置成了loading動(dòng)畫(huà)，并在動(dòng)畫(huà)加載完成后，將背景圖片改為真實(shí)的圖片。

最后，在HTML中使用這個(gè)指令就可以了。例如：

上面的div元素就會(huì)在加載圖片的時(shí)候，顯示loading動(dòng)畫(huà)，從而給用戶更好的體驗(yàn)。這就是Vue img loading的使用方法。