suchen

Heim >Web-Frontend >js-Tutorial >js bestimmt, ob das Bild geladen ist, und implementiert den Vorab-Download der image_javascript-Fähigkeiten

js bestimmt, ob das Bild geladen ist, und implementiert den Vorab-Download der image_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:39:282057Durchsuche

Erstellen Sie ein Bildobjekt, um das Bild vorab herunterzuladen. Wenn das Bild bereits im Browser-Cache vorhanden ist, rufen Sie die Rückruffunktion direkt auf und ermitteln Sie mithilfe des Onload-Ereignisses, ob das Bild geladen ist 

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象，实现图片的预下载 
img.src = url; 

if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 
callback.call(img); 
return; // 直接返回，不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
};
 
<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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung des Node.js-Modulsloading_node.jsNächster Artikel：Detaillierte Erläuterung des Node.js-Modulsloading_node.js

In Verbindung stehende Artikel

Mehr sehen