Go JavaScript implements a full implementation of the pre-loading of pictures

Picture preloading is a widely used technology in web development, such as when we do the image rollover display and other special effects, in order to let the picture in the conversion time does not appear waiting, we'd better let the picture download to the local, and then continue to perform subsequent operations. Today we will implement a complete picture preloading and processing the code after the picture is loaded to perform subsequent operations.

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 parameters are always arrays
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 (Images) {
// when the picture is fully loaded, execute the code here
The //images parameter is an array type that corresponds to the loaded image
//images[0] corresponds 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.

function Preloadimages (arr) {
var newimages=[], loadedimages=0
var arr= (typeof arr!= "Object")? [arr]: arr
function Imageloadpost () {
loadedimages++
if (loadedimages==arr.length) {
Alert ("The picture has been loaded")
}
}
for (var i=0; i<arr.length; i++) {
newimages[i]=New Image ()
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.

Preloadimages (Imagesarray, function () {
// The action taken 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 complete operation
})

As you can see from the above, it will be very clear, and then we'll continue to transform our preloadimages () function.

function preloadimages (arr) {

var newimages=[], loadedimages=0
var postaction=function () {}//A postaction function has been added here
var arr= (typeof arr!= "Object")? [arr]: arr
function Imageloadpost () {
loadedimages++
if (loadedimages==arr.length) {
Postaction (Newimages)//Loading is done by calling the Postaction function and passing the newimages array as a parameter.
}
}
for (var i=0; i<arr.length; i++) {
newimages[i]=New Image ()
Newimages[i].src=arr[i]
Newimages[i].onload=function () {
Imageloadpost ()
}
Newimages[i].onerror=function () {
             imageloadpost ()
        }
    }
    return { //< Span style= "color: #008000;" > This returns the Done method of a blank object
        done:function (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) {

Alert (images.length)Alerts 3
Alert (images[0].src+ "" +images[0].width) //alerts ' 1.gif 220 '
})

Of course, we can also implement various picture operations we need in the done ()!

Go JavaScript implements a full implementation of the pre-loading of pictures