A further discussion on the implementation of JavaScript image preload (Lightbox)

Source: Internet
Author: User
Tags join setinterval

Lightbox class effects use preload to center the picture and need to wait for the full load to be displayed and experience poorly (such as the full screen effect of the Filick album). JavaScript cannot get IMG header data, is that really the case? This article is an ingenious way to get JavaScript to get it.

This is an example of how most people use preload to get the size of a picture:

The code is as follows Copy Code
var imgload = function (URL, callback) {
var img = new Image ();
img.src = URL;
if (img.complete) {
Callback (Img.width, img.height);
} else {
Img.onload = function () {
Callback (Img.width, img.height);
Img.onload = null;
};
};
};var imgload = function (URL, callback) {
var img = new Image ();
img.src = URL;
if (img.complete) {
Callback (Img.width, img.height);
} else {
Img.onload = function () {
Callback (Img.width, img.height);
Img.onload = null;
};
};
};

You can see the above must wait for the picture to load to get the size, its speed is not flattering, we need to improve.

Web applications differ from desktop applications, and response speed is the best user experience. If you want speed and elegance, you must get the picture size in advance, how to get the picture size when the picture is not loaded?

More than 10 years of Internet experience tells me: the browser when loading pictures you will see the picture will occupy a piece of land before slowly loaded, and do not need to preset width and height properties, because the browser can get the image of the head data. Based on this, it is only necessary to use JavaScript to detect the size state of a picture in a timely state.

Of course there will be some compatible traps, such as width and height to detect the inconsistencies of each browser, as well as WebKit new image () created by the image in the loading process with the URL image, after repeated testing the best way to deal with:

The code is as follows Copy Code

CopyText
Update:
05.27:1. Ensure callback execution order: error > Ready > Load;2, callback function This points to the IMG itself
04-02:1, increase the picture after full load callback 2, improve performance

/**
* Picture header Data Load Ready event-get picture size faster
* @version 2011.05.27
* @author Tangbin
* @param {String} picture path
* @param {Function} dimensions ready
* @param {Function} loaded complete (optional)
* @param {Function} load error (optional)
* @example imgready (' Http://www.xxx.com/logo. PNG ', function () {
Alert (' Size ready:width= ' + this.width + '; height= ' + this.height);
});
*/
var Imgready = (function () {
var list = [], intervalid = null,

Used to execute queues
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 picture is cached, the cached data is returned directly
if (img.complete) {
Ready.call (IMG);
Load && load.call (IMG);
Return
};

width = img.width;
Height = img.height;

Events after loading errors
Img.onerror = function () {
Error && Error.call (IMG);
Onready.end = true;
img = img.onload = Img.onerror = null;
};

Picture size Ready
Onready = function () {
Newwidth = Img.width;
Newheight = Img.height;
if (newwidth!== width | | | newheight!== Height | |
If the picture has been loaded elsewhere, the usable area can be detected
Newwidth * newheight > 1024
) {
Ready.call (IMG);
Onready.end = true;
};
};
Onready ();

Fully Loaded Events
Img.onload = function () {
OnLoad may be faster than Onready in the timer time difference range
Check here and ensure Onready priority
!onready.end && Onready ();

Load && load.call (IMG);

IE gif animation will loop to execute onload, empty onload can be
img = img.onload = Img.onerror = null;
};

To join a queue for periodic execution
if (!onready.end) {
List.push (Onready);
Reduces browser performance loss whenever only one timer is allowed
if (intervalid = = null) Intervalid = SetInterval (tick, 40);
};
};
}) ();//update:
05.27:1. Ensure callback execution order: error > Ready > Load;2, callback function This points to the IMG itself
04-02:1, increase the picture after full load callback 2, improve performance

/**
* Picture header Data Load Ready event-get picture size faster
* @version 2011.05.27
* @author Tangbin
* @see Http://www.111cn.net
* @param {String} picture path
* @param {Function} dimensions ready
* @param {Function} loaded complete (optional)
* @param {Function} load error (optional)
* @example imgready (' yun_qi_img/logo.jpg ', function () {
Alert (' Size ready:width= ' + this.width + '; height= ' + this.height);
});
*/
var Imgready = (function () {
var list = [], intervalid = null,

Used to execute queues
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 picture is cached, the cached data is returned directly
if (img.complete) {
Ready.call (IMG);
Load && load.call (IMG);
Return
};

width = img.width;
Height = img.height;

Events after loading errors
Img.onerror = function () {
Error && Error.call (IMG);
Onready.end = true;
img = img.onload = Img.onerror = null;
};

Picture size Ready
Onready = function () {
Newwidth = Img.width;
Newheight = Img.height;
if (newwidth!== width | | | newheight!== Height | |
If the picture has been loaded elsewhere, the usable area can be detected
Newwidth * newheight > 1024
) {
Ready.call (IMG);
Onready.end = true;
};
};
Onready ();

Fully Loaded Events
Img.onload = function () {
OnLoad may be faster than Onready in the timer time difference range
Check here and ensure Onready priority
!onready.end && Onready ();

Load && load.call (IMG);

IE gif animation will loop to execute onload, empty onload can be
img = img.onload = Img.onerror = null;
};

To join a queue for periodic execution
if (!onready.end) {
List.push (Onready);
Reduces browser performance loss whenever only one timer is allowed
if (intervalid = = null) Intervalid = SetInterval (tick, 40);
};
};
}) (); Call Example:

CopyText
Imgready (' yun_qi_img/logo.jpg ', function () {
Alert (' Size ready:width= ' + this.width + '; height= ' + this.height);
}); Imgready (' Yun_qi_img/logo.jpg ', function () {
Alert (' Size ready:width= ' + this.width + '; height= ' + this.height);
});

Is it simple? This way to get photographic level photo size is often more than 10 times the OnLoad method, and the Web Normal (800x600) browsing level of the image can achieve a second kill effect. Look at this and then recall that you have seen the Web albums, whether the vast majority of the can be reconstructed?

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.