Image pre-loading is a bit like lightbox. It is automatically loaded without the width and height of the image. In this way, the image size is automatically set when you want to view the image, this will make people feel fast. Next I will introduce a piece of pre-loading
During project development, JavaScript is often used to determine whether an image is loaded successfully. If the image is loaded successfully, the corresponding onload binding event is executed,
This is what we call the image pre-loading technology. First, the final version of the Code:
The Code is as follows: |
Copy code |
Function loadImage (url, callback ){ Var img = new Image (); Img. onload = function (){ Img. onload = null; Callback (img ); } Img. src = url; }
|
We found that IE6, IE7, and IE8:
If the image is already stored in the browser cache, When you initiate a request for the image again, the browser will load the image directly from the cache, so that the onload event cannot be triggered.
In IE9, Chrome, and FireFox:
Whether an image is stored in the browser cache or not, the onload event is triggered.
Therefore, in the above Code, we must first bind the onload event to the img and assign the src address to it!
We can also optimize the above Code. In reality, there will be some compatibility traps, such as the inconsistency between width and height detection of various browsers, and webkit new Image () the created image will be affected by the same url image in the loading process. The best solution after repeated tests is as follows:
The Code is as follows: |
Copy code |
// Update: // 05.27: 1. Ensure the callback execution sequence: error> ready> load; 2. the callback function this points to the img itself. // 04-02: 1. Add the callback after the image is fully loaded. 2. improve performance. /** * Image header data loading readiness event-Get image size faster * @ Version 2011.05.27 * @ Author TangBin * @ Param {String} image path * @ Param {Function} the dimension is ready. * @ Param {Function} (optional) * @ Param {Function} loading error (optional) * @ Example imgReady('hlogo_cn.png ', function (){ Alert ('size ready: width = '+ this. width +'; height = '+ this. height ); }); */ Var imgReady = (function (){ Var list = [], intervalId = null, // Used for queue execution Tick = function (){ Var I = 0; For (; I <list. length; I ++ ){ List [I]. end? List. splice (I --, 1): list [I] (); }; ! List. length & stop (); }, // Stop all timer queues Stop = function (){ ClearInterval (intervalId ); IntervalId = null; }; Return function (url, ready, load, error ){ Var onready, width, height, newWidth, newHeight, Img = new Image ();
Img. src = url; // If the image is cached, the cached data is directly returned. If (img. complete ){ Ready. call (img ); Load & load. call (img ); Return; };
Width = img. width; Height = img. height;
// Load the event after the error Img. onerror = function (){ Error & error. call (img ); Onready. end = true; Img = img. onload = img. onerror = null; };
// The image size is ready Onready = function (){ NewWidth = img. width; NewHeight = img. height; If (newWidth! = Width | newHeight! = Height | // If the image has been loaded elsewhere, area detection can be used. NewWidth * newHeight> 1024 ){ Ready. call (img ); Onready. end = true; }; }; Onready ();
// Events that have been fully loaded Img. onload = function (){ // Onload may be faster than onready In the timer time difference range // Check and ensure that onready takes priority ! Onready. end & onready ();
Load & load. call (img );
// The ie gif animation cyclically executes onload and sets the empty onload parameter. Img = img. onload = img. onerror = null; }; // Add to the queue for regular execution If (! Onready. end ){ List. push (onready ); // Only one timer is allowed at a time to reduce the performance loss of the browser. If (intervalId = null) intervalId = setInterval (tick, 40 ); }; }; })(); |
Call Method
The Code is as follows: |
Copy code |
ImgReady('hlogo_cn.png ', function (){ Alert ('size ready: width = '+ this. width +'; height = '+ this. height ); }); |
In this way, the performance is dozens of times better than the first one.