1010Code

JS判斷圖片是否載入完成

2021/03/21 Web

前言

當圖片畫素較高時，網頁就必須要花時間從伺服端下載。因此在網頁第一次載入時會等待圖片下載的時間，所導致空窗期等待。常見的解決方式就是加入 Loading 畫面，但是要如何透過 JavaScript 來監聽並接收圖片以載入完成的事件呢？下圖就是今天要簡單實作的範例。

透過 JS 監聽圖片下載

首先建立一張影像的 DOM，透過 onload() 函式來監聽圖片載入是否完成，當成功載入後就會觸發此函式。因此我們可以在此函式中停止 loading 的動畫。

// 建立一張照片
var bgImg = new Image();
// 當圖片載入完成時執行onload function
bgImg.onload = function () {
    console.log('載入完成！');
    // 在body放入背景圖位置
    document.body.style.backgroundImage = 'url(' + bgImg.src + ')';
    // 停止loading動畫
    document.getElementById('load-wrapper').classList.add('d-none');
};
// 指定圖片來源位置
bgImg.src = 'https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView1_50cm_8bit_BW_DRA_Bangkok_Thailand_2009JAN06_8bits_sub_r_1.jpg';

補充

如果要監聽 <img> 標籤內的圖片是否以載入完成，可以透過取得圖片標籤的 DOM。一樣呼叫 onload() 函式來監聽圖片載入是否完成。

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <img src="https://effigis.com/wp-content/uploads/2015/02/DigitalGlobe_WorldView1_50cm_8bit_BW_DRA_Bangkok_Thailand_2009JAN06_8bits_sub_r_1.jpg">
    <p>loading...</p>
    <script type="text/javascript">
      document.getElementsByTagName("img")[0].onload =function() {
        document.getElementsByTagName("p")[0].innerHTML ='載入完成！';
      }
    </script>
  </body>
</html>

完整 Code 可以從我的 GitHub 中取得！

鼓勵持續創作，支持化讚為賞！透過下方的 Like 拍手👏，讓創作者獲得額外收入~
版主10在2020年首次開設YouTube頻道，嘗試拍攝程式教學。想要了解更多的朋友歡迎關注我的頻道，您的訂閱就是最大的支持～如果想學其他什麼內容也歡迎許願XD
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A

Search

    Table of Contents