Js checks whether the image is loaded and implements pre-download of the image
Create an Image object to pre-download the Image. If the Image already exists in the browser cache, directly call the callback function and use the onload event to determine whether the Image is loaded.
| 01 |
Function loadImage (url, callback ){ |
| 02 |
Var img = new Image (); // create an Image object to implement pre-download of the Image |
| 05 |
If (img. complete) {// if the image already exists in the browser cache, call the callback function directly. |
| 06 |
Callback. call (img ); |
| 07 |
Return; // return directly without handling the onload event |
| 09 |
Img. onload = function () {// call the callback function asynchronously when the image is downloaded. |
| 10 |
Callback. call (img); // replace this of the callback function with the Image object. |
| 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"> |
| 04 |
<Meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1"> |
| 05 |
<Title> determine whether the image is loaded successfully </title> |
| 12 |
<Script language = "JavaScript"> |
| 13 |
Document. getElementById ("img2"). onload = function (){ |
| 14 |
Alert ("image Loading completed "); |
