DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js 判斷圖片是否加載完以及實現圖片的預下載
js 判斷圖片是否加載完以及實現圖片的預下載
編輯:JavaScript綜合知識     

 創建一個Image對象,實現圖片的預下載,如果圖片已經存在於浏覽器緩存,直接調用回調函數,使用onload事件可以判斷圖片是否加載完成

01 function loadImage(url, callback) {  02 var img = new Image(); //創建一個Image對象,實現圖片的預下載  03 img.src = url;  04    05 if(img.complete) { // 如果圖片已經存在於浏覽器緩存,直接調用回調函數  06 callback.call(img);  07 return; // 直接返回,不用再處理onload事件  08 }  09 img.onload = function () { //圖片下載完畢時異步調用callback函數。  10 callback.call(img);//將回調函數的this替換為Image對象  11 };  12 }; 01 </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">  02 <html>  03 <head>  04 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  05 <title>判斷圖片是否加載完成</title>  06    07 </head>  08 <body>  09 <img id="img2" src="images/1.jpg" />  10 </body>  11 </html>  12 <script language="JavaScript">  13 document.getElementById("img2").onload = function () {  14 alert("圖片加載已完成");  15 }  16 </script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved