The following function implements one of the most basic picture preload effects we want
function Preloadimages (arr) { var newimages=[] var arr= (typeof arr!= " Object ")? [arr]: arr // Ensure that the parameters are always array for (var i=0; i<arr.length; i++) { Newimages[i]=new Image () newimages[i].src=arr[i] }}
we can load the picture we want by the following way
Preloadimages ([' 1.gif ', ' 2.gif ', ' 3.gif ')
The above method has been able to meet our most basic preload picture effect, but often not the case, we often need to know exactly whether the image is actually loaded complete, and may be in the subsequent execution of a series of image operation function. Fortunately, this feature is not difficult to implement, we can use the onload and onerror events to handle the decision whether the picture is loaded (or failed). In the final implementation code of this article, we will transform the proloadimages () function to look like this.
Preloadimages ([' 1.gif ', ' 2.gif ', ' 3.gif ']). Done (function// when the picture is fully loaded, execute the code here ///images parameter is an array type, corresponding to the loaded image //images[0] corresponding to the first image })
First we use the onload and onerror event handlers of the image object to detect the loading of the picture (success or failure), and the modified code is as follows.
functionPreloadimages (arr) {varNewimages=[], loadedimages=0varArr= (typeofArr!= "Object")?[arr]: arrfunctionImageloadpost () {loadedimages++if(loadedimages==arr.length) {Alert ("The picture has been loaded") } } for(vari=0; i<arr.length; i++) {Newimages[i]=NewImage () newimages[i].src=Arr[i] Newimages[i].onload=function() {imageloadpost ()} newimages[i].onerror=function() {imageloadpost () }}}
We can test the function using the call method of code 2, and when the picture is fully loaded (success or failure), the browser will pop up the message "picture has been loaded."
Now we will add a callback function for the preloadimages () function to handle the subsequent operation
Usually we will add an anonymous function to our preloadimages () function as a parameter to complete the function we need. After that, the code that we call the Preloadimages () function may be as follows.
function// action performed after the picture is loaded })
But now we're doing a little bit of change, making the code look more intuitive and easier to understand, and after the transformation is complete,the call to the Preloadimages () function looks as follows.
Preloadimages (Imagesarray). Done (function// image loading completed operation })
As you can see from the above, it will be very clear, and then we'll continue to transform our preloadimages () function.
functionPreloadimages (arr) {varNewimages=[], loadedimages=0varpostaction=function(){}//a postaction function has been added here varArr= (typeofArr!= "Object")?[arr]: arrfunctionImageloadpost () {loadedimages++if(loadedimages==arr.length) {postaction (newimages)//loading is done by calling the Postaction function and passing the newimages array as a parameter. } } for(vari=0; i<arr.length; i++) {Newimages[i]=NewImage () newimages[i].src=Arr[i] Newimages[i].onload=function() {imageloadpost ()} newimages[i].onerror=function() {Imageloadpost ()}}return{//here returns the Done method for a blank objectDonefunction(f) {postaction=f | |postaction} }}
The above code, we have slightly modified several places:
First, we add a postaction function, which is used as a callback function after the image is loaded, and the user can overwrite the function with its own handler function when it is called later.
Second, our preloadimages () function returns an empty object that contains a simple done () method, which is the key to implementing this transformation, ensuring the implementation of chained calls.
Finally, our call becomes the following form
Preloadimages ([' 1.gif ', ' 2.gif ', ' 3.gif ']). Done (function(images) { //Alerts 3 //alerts ' 1.gif'})
Of course, we can also implement various picture operations we need in the done ()!
Reprint Address: http://www.cnblogs.com/mz121star/archive/2012/11/01/javascript_preloadimages.html
JavaScript implements pre-loading of pictures (go)