快捷導(dǎo)航

js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載

更新時(shí)間：2014年08月14日 17:55:53 投稿：whsnow

這篇文章主要介紹了js 判斷圖片是否加載完以及實(shí)現(xiàn)圖片的預(yù)下載,需要的朋友可以參考下

創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載，如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)，使用onload事件可以判斷圖片是否加載完成

function loadImage(url, callback) { 
var img = new Image(); //創(chuàng)建一個(gè)Image對(duì)象，實(shí)現(xiàn)圖片的預(yù)下載 
img.src = url; 

if(img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù) 
callback.call(img); 
return; // 直接返回，不用再處理onload事件 
} 
img.onload = function () { //圖片下載完畢時(shí)異步調(diào)用callback函數(shù)。 
callback.call(img);//將回調(diào)函數(shù)的this替換為Image對(duì)象 
}; 
};

 </pre><pre code_snippet_id="395795" snippet_file_name="blog_20140617_3_4709132" name="code" class="html"><pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>判斷圖片是否加載完成</title> 

</head> 
<body> 
<img id="img2" src="images/1.jpg" /> 
</body> 
</html> 
<script language="JavaScript"> 
document.getElementById("img2").onload = function () { 
alert("圖片加載已完成"); 
} 
</script>

您可能感興趣的文章:

相關(guān)文章

javascript實(shí)現(xiàn)TreeView 無(wú)刷新展開的實(shí)例代碼
這篇文章介紹了javascript實(shí)現(xiàn)TreeView 無(wú)刷新展開的實(shí)例代碼，有需要的朋友可以參考一下
2013-07-07
限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇限制復(fù)選框最多選擇項(xiàng)的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
Fastest way to build an HTML string(拼裝html字符串的最快方法)
Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 2009
2011-08-08
Javascript中call，apply，bind方法的詳解與總結(jié)
本文主要Javascript中call，apply，bind方法的進(jìn)行全面分析，并在文章結(jié)尾對(duì)call，apply，bind方法的聯(lián)系和區(qū)別做了總結(jié)，具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
2016-12-12
javascript框架設(shè)計(jì)之類工廠
這篇文章主要介紹了javascript框架設(shè)計(jì)之類工廠的相關(guān)資料,非常淺顯易懂，有需要的小伙伴可以查看下。
2015-06-06
070823更新的一個(gè)[消息提示框]組件兼容ie7
070823更新的一個(gè)[消息提示框]組件兼容ie7...
2007-08-08
詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)
這篇文章主要介紹了小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加，修改，刪除功能(推薦)
這篇文章主要介紹了JS實(shí)現(xiàn)動(dòng)態(tài)表格的添加，修改，刪除功能(推薦)的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
一些超實(shí)用的JS常用算法詳解(推薦!)
算法是計(jì)算機(jī)算法即計(jì)算機(jī)能夠執(zhí)行的算法,只有明確了算法后,才能使應(yīng)用程序?qū)崿F(xiàn)某些功能,所以通常人們會(huì)將算法稱為程序的靈魂,下面這篇文章主要給大家分享介紹了一些超實(shí)用的JS常用算法的相關(guān)資料,需要的朋友可以參考下
2022-10-10