有時候我們在前端開發工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執行相應的回調函數使圖片產生某種顯示效果。本文主要整理了幾種常見的javascipt判斷圖片加載完成時的方法，并通過代碼與實際應用相結合進行解釋與說明。

onload方法

通過向img標簽添加onload屬性，并填入相應的函數來執行后續的javascipt代碼。如下代碼例子中img元素默認是不顯示的，通過onload判斷加載完成后再將圖片顯示出來。

<img class="pic1" οnlοad="get(this)" src="..." style='display:none' /><script type="text/javascript"> function get(ts){ts.style.display = 'block'; //顯示圖片 } </script>

優點：可以將javascript代碼部分放置于頁面的任何部分加載，并且可以用于多數任意圖片上。使用比較簡單，易理解。

缺點：必須在每個標簽上都貼上onlaod屬性，在某些無法直接操作HTML代碼，或者需要代碼精簡的情況下不適用

?

javascipt原生方法

選取指定ID的圖片，通過onload指定回調方法，在圖片加載完成后彈出“圖片加載已完成”字樣提示。

<img id="pic1" src="..." /><script language="JavaScript">document.getElementById("pic1").onload = function () {alert("圖片加載已完成");} </script>

優點：簡單易用，不影響HTML代碼。

缺點：只能指定一個元素，javascipt代碼必須置于圖片元素的下方

?

jquery方法

為每個class為pic1的圖片元素綁定事件，通過jquery的load方法，將元素漸現出來。

注意，不要在$(document).ready()里綁定load事件。

<script type="text/javascript"> $(function(){$('.pic1').each(function() {$(this).load(function(){$(this).fadeIn();});}); }) </script>

優點：可以批量綁定元素事件，并且不影響HTML代碼內容

缺點：需要jquery庫的支持，代碼需要放置到需要操作元素的下方。

轉載于:https://www.cnblogs.com/1rui/p/5509848.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的javascript判断图片是否加载完成方法整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。