Jquery implements image preload _ jquery

This article mainly introduces jquery's method of implementing image pre-loading. The content is very detailed, and we will learn about jquery image pre-loading in all aspects, if you are interested, you can refer to using jquery to implement image pre-loading to increase the page loading speed and user body. This section provides a detailed analysis of the implementation principles of jquery image pre-loading.

When can I use image pre-loading?

If the page uses a lot of images that are not visible when it is initially loaded, it is necessary to pre-load them:

$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('img').attr('src', arguments[i]); }};$.preloadImages('img/hover-on.png', 'img/hover-off.png');

During website creation, we often encounter the following problem: a large number of images on a page causes slow page loading speed, and a white page user experience is often poor. How can this problem be solved? First, we will think of Improving the server performance and using static cache and other means to accelerate image loading. This is indeed a good method, but sometimes we can also find some solutions from the front-end. Next I will introduce a js pre-loading method that is often used in practical applications.
First, when the image is output, we have done some processing. After processing html, we started to write Javascript. Here I used the jquery class library.

$ ('Img [data] '). load (function () {var _ this _ = $ (this); var url = _ this __. attr ('data'); var src = _ this __. attr ('src'); if (url = ''| url = src) // determine if the actual image address does not exist or has been loaded and not processed {return ;} var img = newImage (); // instantiate the img object of an image. src = url; // the image to be displayed is loaded into if (img. complete) // directly process {_ this _ If the image has been loaded into the browser cache __. attr ('src', url); // Replace the image to be displayed with return;} img. onload = function () {// process _ this _ after loading the image to be displayed __. attr ('src', url );}});

Example:Javascript and Jquery display page image pre-loading percentage

If you need to display the loading progress during initial page loading. It mainly refers to the situations where there are many images:

You can use the third-party Jquery plug-in jquery. imgpreload. min. js
Call the method: imgpreload. The example is as follows:

Var imgNum = 0; var images = []; $ (function () {preloadImg () ;}); // There are two methods in function preLoadImg () {// Method 1: Use the dom method to retrieve all img in the page, including the tag and background-image/* get all imgs those tag is var imgs = document. images; for (var I = 0; I 

In this way, you can receive a percentage prompt when there are many page images and the network speed is very slow.
Before doing this, since each local test load was very fast, the percentage instantly reached 100% and then disappeared. To look at the same thing, I also wrote a pseudo percentage progress bar for reference only:


 var t = window.setTimeout("preLoad()", 100); function preLoad() {  $("#loading p").animate({ width: step + "px" }, 50).text(step + "%");  step += 1;  if (step <= 100) {   t = window.setTimeout("preLoad()", 100);  } else {   clearTimeout(t);   $("#loading").fadeOut(1000);   $("#preloadImg").fadeOut(1000);      $(".main").show(); }

After the page Initialization is complete, there is a process of simulating the increasing percentage on the page. After 100%, the progress bar disappears and the page is displayed, but it has nothing to do with the actual page loading.
The above is a detailed study of jquery image pre-loading, hoping to help you learn.