如何使用JavaScript檢查背景圖片是否已載入？

我們主要使用JavaScript來建立動態網頁應用。這種指令碼語言使網頁看起來更具互動性。JavaScript極大地為我們的網站添加了一些邏輯。正如我們提到的，使用者可以檢查背景圖片是否已載入。網頁開發者可以瞭解頁面是否正確載入以及背景圖片是否正確顯示。

為了檢查網頁開發者指定的背景圖片是否已載入，使用者可以使用影像物件。我們可以訪問與影像相關的物件的屬性和方法，並且可以使用JavaScript的兩種技術來檢查背景圖片是否已載入。

  • 使用onload() 屬性

  • 使用addEventListener() 方法

當影像載入完畢時，會自動觸發名為“onload”的事件。假設我們編寫任何函式，該函式將在影像載入完成後執行。我們可以在影像正確載入後對該影像執行任何操作。我們也可以使用“addEventListener()”方法來執行相同的操作。在本教程中，我們將學習如何使用JavaScript檢查背景圖片是否已載入。

使用onload屬性

正如我們之前討論的，我們可以使用onload屬性。onload是一個JavaScript事件處理程式。當一個元素（如影像）完成載入時，如果onload屬性指定了函式，則會呼叫該函式。無論元件是否成功載入，只要完成載入，就會觸發onload事件。

onload事件也可以與其他元素一起使用，例如<iframe>或<body>，但它最常與<img>標籤一起使用，以確定影像是否已完成載入。

語法

<element onload = "functionName()">

在此語法中，當元素完成載入時，將執行‘functionName’函式。

示例

在此示例中，我們使用JavaScript檢查背景圖片是否已載入。我們使用一個圖片作為背景圖片，並使用onload事件處理程式屬性來觸發載入事件，該事件將執行一個函式。預設情況下，我們將div的文字設定為“背景圖片未載入！”，並且每當觸發onload事件處理程式時，我們將文字更改為“背景圖片已載入！”。

<html>
<body>
   <h3>Checking whether the <i>background image is loaded or not</i> using JavaScript</h3>
   <div style = "height: 100px">
      <img src = "https://tutorialspoint.tw/images/logo.png" onload = "loadedFunc()" />
   </div>
   <div id = "root" style = "padding: 10px; background: #b8cdab">
      Background Image is not Loaded!
   </div>
   <script>
      let root = document.getElementById('root')
      function loadedFunc() {
         root.innerHTML = 'Background Image is Loaded!'
      }
   </script>
</body>
</html>

使用addEventListener() 方法

使用者可以使用的第二種方法是addEventListener方法。此方法也可用於檢視背景圖片是否已載入。使用者可以使用addEventListener方法向元素新增事件監聽器，並指定一個回撥函式，該函式將在事件發生時觸發。

addEventListener方法有很多優點。此方法允許使用者連線多個事件監聽器，每個監聽器都可以有其回撥函式。使用onload屬性，這是不可能的。

使用者可以使用addEventListener方法將事件監聽器附加到任何元素。它是使用onload屬性的更靈活的替代方案，因為它可以為單個元件連線多個事件監聽器及其回撥函式。

語法

element_object.addEventListener('load', function () {
   // write your code here
})

在此語法中，element_object是我們使用addEventListener和load事件的元素物件。

示例

在此示例中，我們使用一個圖片作為背景圖片，並使用addEventListener方法將load事件繫結到影像元素。addEventListener方法還在引數中獲取一個函式，該函式將在觸發load事件時執行。預設情況下，我們將div的文字設定為“背景圖片未載入！”，並且此函式會將文字更改為“背景圖片已載入！”。

<html>
<body>
   <h2>Checking whether the <i>background image is loaded or not</i> using JavaScript</h2>
   <div>
      <img
      id = "myImage"
      style = "height: 200px"
      src="https://tutorialspoint.tw/javascript/images/javascript.jpg"/>
   </div>
   <div id = "root" style = "padding: 10px; background: #edf0b8">
      Background Image is not Loaded!
   </div>
   <script>
      let root = document.getElementById('root')
      let myImage = document.getElementById('myImage')
      myImage.addEventListener('load', function () {
         root.innerHTML = 'Background Image is Loaded!'
      })
   </script>
</body>
</html>

總之，JavaScript可以檢查背景圖片是否已載入。這對於網頁開發者確保頁面正確顯示以及顯示的圖片是預期的圖片非常有用。

更新於：2023年2月8日

2K+ 瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告