jquery Picture preloading

jquery picture preloading is not a new technology, such as in the picture carousel (some hover events) in order to improve the image loading speed, which requires the use of image preloading technology, so that the image of the switch appears smooth, so that a certain sense of the user experience. Let's take a look at the implementation method and simple description:UI front-end Framework latest masterpiece! Award Probation

. Code

2. var img = $ (' '). attr (' src ', ' imageurl.jpg ');

jquery creates a picture element and sets its address, and when it is placed in document ready, it tells the browser to load the specified picture when it is loaded. Of course, most of the time we will not do so, otherwise the page has been waiting for the picture loading phenomenon. And when the user opens a picture album, we can do this with the pre-loaded image, because we can foresee the possibility that the user will continue to browse the next image. We can also pre-load a specific number of pictures according to the naming rules of the picture, instead of all of a sudden load the required pictures, the Internet to see such a small code:. Code

2. $.preloadimages = function () {
4. for (var i = 0; i < arguments.length; i++) {
6. $ ("). attr ("src", arguments[i]);
8. }
10. }
12. $.preloadimages ("image1.jpg","image2.jpg");

When we open chrome, we can monitor the loading of images in the console network, and you'll see that the pictures are actually preloaded. Interested friends can see the chrome debugging JS, familiar with the next chrome under the current request of the monitoring method, also disable the Chrome browser cache can obviously feel the picture preload brought about by the speed increase (press F12 in the lower right corner of the console gear-like east, there are settings). UI front-end frame latest masterpiece! Award Probation

Finally we use the Append or Appendto method to place the picture in the element we specify:

. Code

2. $ (' #container '). Append (IMG);

The process at this point does not take much time, because we know that the picture has already been downloaded.

jquery Picture preloading