The art of pre-loading display pictures

In general, the picture in the Web page is loaded with the document flow sequentially, when the use of when the load, but sometimes this way of loading will often affect the user experience, such as the mouse hover to transform the background image, only the mouse will be moved into the image of the transformation of the load, In this way, there may be a moment of loading whitespace, and the same is true for hiding the contents of the website after the slice is displayed.

In order to increase the user experience when necessary, improve the interactive grid of Web pages, we have to introduce the art of pre-loading tablets.

So what is picture preloading?

The truth is very simple, although some pictures 1:30 I can not use, but in order to avoid the use of the phenomenon of unprepared, I still obediently put them first, in some cases quietly loading them in, in case of a temporary need.

OK, so how can you achieve such a function?

It's simple, actually.

Here is the introduction of a jquery library preloadimages () function, using this function can easily implement the picture preloaded, the following to see quickly, the code is as follows:

1 $ (function () {2     var cache=[]; 3/     /write a pre-loaded jquery function for a picture 4     $.preloadimages = function () {5         //Gets the number of arguments for the body of the function 6         var args_len = arguments.length; 7         //Reverse loop parameter number, create IMG element 8 for         (var i = Args_len; i--;) {9             var cacheimage = document.createelement (' img ');             //Specify the SRC attribute of the IMG element to the value of the array element one by one             cacheimge.src = arguments [I];12             //Add HTML elements to the array             Cache.push (cacheimage); +}    16});

OK, the notes are written very clearly, or not read? Okay, so let's just ignore the code, but you can do this by following the steps below:

1//Pre-load Picture 2 $.preloadimages (' images/sample1.jpg ', ' images/sample2.jpg ', ' images/sample3.jpg ');

One of the

' Images/sample1.jpg ', ' images/sample2.jpg ', ' images/sample3.jpg '

is the path of the picture, preloaded with multiple images are separated by commas,

This way, when you reference a picture anywhere on the page, you get the desired picture from the cache, which improves the user's experience and makes the site more fluent.

It's not over yet, someone might ask, what if the image path fails loading error?

Oh, and then teach you a trick, error on the wrong chant, we have plan B, for the image of the error show another we prepared a picture, with this picture to replace all the pictures can not be displayed, then how to do it, the method is very simple, the code is as follows:

1 $ (function () {2     $ ("img"). Error (function () {3         $ (this). Prop ("src", "images/planb.jpg"); 4     }); 5});

It's done, and we're doing it.

Here is the main introduction to the error () event, which is defined and used as:

The error event occurs when an element encounters an error (not loaded correctly).

The error () method triggers an error event, or a function that runs when an error event occurs.

Good to understand, so far our image preloading method is finished.

This part of the code and writing ideas refer to the "super-Practical jquery code snippet," a book, you are welcome to actively try, comment and correct.

The art of pre-loading display pictures