javascript 中的圖像加載事件及問題解析

更新時(shí)間：2023年07月06日 14:50:31 作者：跡憶客

本文將討論如何在JavaScript中處理 .onload 事件，我們將學(xué)習(xí)如何在上傳圖像后使用 JavaScript 創(chuàng)建警告框,需要的朋友可以參考下

JavaScript 中的 .onload 事件

.onload 事件僅在加載對(duì)象時(shí)發(fā)生。 .onload 事件主要用在元素主體中，一旦網(wǎng)頁(yè)加載了所有內(nèi)容（包括圖像、腳本、CSS 文件等），就會(huì)執(zhí)行腳本。

使用的瀏覽器將允許我們跟蹤外部資源（如圖像、腳本、iframe 等）的加載。當(dāng)我們上傳圖像時(shí)，如果它保存在瀏覽器緩存中，則會(huì)觸發(fā) onload 事件。

我們?nèi)绾蝿?chuàng)建一個(gè)警告框，無(wú)論圖像是否被緩存，它都會(huì)在加載圖像時(shí)顯示？

我們需要?jiǎng)?chuàng)建一個(gè)警告框，當(dāng) onload 事件在圖像上觸發(fā)時(shí)，它將顯示一條消息，說(shuō)明圖像已成功加載。我們可以使用 JavaScript 和 HTML 來(lái)解決這個(gè)問題。

JavaScript 中的 image.onload 事件

使用 JavaScript，我們可以檢查圖像是否已完全加載。我們將使用 HTMLimageElement 接口的 complete 屬性。

當(dāng)圖像已完全上傳時(shí)，此屬性返回 true，否則返回 false。我們?cè)?JavaScript 中有 naturalWidth 和 naturalHeight 屬性，我們可以使用其中任何一個(gè)。

我們?cè)谑纠a中使用了 .naturalWidth ，如果圖像加載成功則返回 true，否則返回 0。

HTML 代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Onload event using Javascript</title>
    <link rel="stylesheet" href="styles.css" rel="external nofollow"  rel="external nofollow"  />
  </head>
  <body>
      <h1 class="title">Onload event using Javascript</h1>
      <script src="script.js"></script>
      <img src="https://secure.gravatar.com/avatar?d=wavatar">
  </body>
</html>

JavaScript 代碼:

window.addEventListener("load", event => {
    var image = document.querySelector('img');
    var isLoadedSuccessfully = image.complete && image.naturalWidth !== 0;
    alert(isLoadedSuccessfully);
});

如果我們運(yùn)行這段代碼，它會(huì)返回 true，這意味著圖像加載成功。

HTML 中的 image.onload 事件

如果我們不想使用 JavaScript，我們可以使用 HTML 屬性來(lái)檢查圖像是否已加載。在 HTML 中，我們可以使用 onload 和 onerror 屬性。

在 HTML 中，onload 屬性在圖像加載成功時(shí)觸發(fā)，而 onerror 屬性在加載圖像時(shí)發(fā)生錯(cuò)誤時(shí)觸發(fā)。

我們?cè)谝韵麓a中使用了 onload 和 onerror 屬性。因此，在這些屬性的幫助下，我們可以創(chuàng)建一個(gè)警告框，在加載圖像時(shí)顯示一條消息，說(shuō)明圖像已成功加載。

如果在加載圖像時(shí)發(fā)生錯(cuò)誤，它將顯示一條消息，指出圖像未加載。

HTML 代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>Onload event using HTML</title>
    <link rel="stylesheet" href="styles.css" rel="external nofollow"  rel="external nofollow"  />
  </head>
  <body>
      <h1 class="title">Onload event using HTML </h1>
      <p id="currentTime"></p>
      <script src="script.js"></script>
      <img src="https://secure.gravatar.com/avatar?d=wavatar"
      onload="javascript: alert('The image is loaded successfully')"
      onerror="javascript: alert('Image is not loaded')" />
  </body>
</html>

如果我們運(yùn)行代碼，它會(huì)顯示圖像加載成功的警告消息。

到此這篇關(guān)于javascript 中的圖像加載事件的文章就介紹到這了,更多相關(guān)js圖像加載事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: