最近在用vue-lazyload的時候發現了一個令人困擾的問題——圖片閃爍。在未加載完成之前，圖片會跳來跳去，影響了用戶體驗。

經過查閱資料和測試，總結出以下可能導致閃爍的原因：

img {
opacity: 0;
transition: opacity 300ms ease-in-out;
}
img.lazyload {
opacity: 1;
}

這是大多數懶加載插件的實現方式。當圖片加載完成后，會給圖片加上lazyload類名，然后把opacity設置為1，使圖片漸顯出來。但這種做法可能會引起一些閃爍問題。

原因是在圖片加載完成前，img標簽上沒有lazyload類名，并且opacity設置為0，導致圖片不可見。當圖片加載完成后，突然把lazyload類名添加上去，并且把opacity設置為1，這種突變會讓圖片突然出現，導致閃爍效果。

為了避免圖片閃爍，我們需要在圖片沒有加載完成之前，先保證它始終有一個占位符。占位符可以是一個背景色、一個loading圖標或者是最開始渲染時的默認圖片，這樣可以避免改變圖片的位置和大小。

<img v-lazy="item.src" v-bind:src="item.placeholder" />

在使用vue-lazyload的時候，我們可以在img標簽上綁定一個占位符的src，這樣即使圖片還沒有加載完成，也不會發生位置和大小的變化。當圖片加載完成后，會把src替換成真正的圖片地址。

總結：要避免圖片閃爍問題，我們需要在圖片加載完成前，為它設置一個占位符。占位符可以是背景色、loading圖標或者默認圖片。