在Vue中,我們常常需要在頁面上顯示圖片。當圖片較大或網絡條件較差時,圖片加載可能會需要較長時間。為保證用戶體驗,我們可以使用Vue提供的組件,并結合onload事件實現圖片加載完畢后的動作。
代碼如下:
圖片加載完成
如上代碼所示,我們在模板中以動態綁定的方式設置圖片的src屬性,并在標簽上添加@load事件監聽加載完成事件。在methods中,我們定義了handleImgLoaded方法,在圖片加載完成時被觸發,將show屬性的值設置為true,從而顯示出“圖片加載完成”的文字。
需要注意的是,由于圖片加載需要一定時間,因此在圖片加載期間show屬性的值為false。因此可以配合v-if指令,控制文字的顯示,保證用戶體驗。
上一篇html定位表設置坐標