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

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?