Javascript image pre-loading technology

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.