Let's talk about the Javascript image pre-loading technology.

Get image size faster than onload

ArticleUpdated: 2011-05-31
The lightbox effect is pre-loaded to enable the picture to be displayed in the center. You need to wait until it is fully loaded to display the effect. The experience is poor (such as the full screen effect of the filick album ). Javascript cannot obtain the imgfile header data. Is that true? This article uses a clever method for JavaScript to obtain it.

This is an example of how most people use the pre-loading method to obtain the image size:

 VaR Imgload = Function  (URL, callback ){ 02 VaR IMG = New  Image (); 03 04 IMG. SRC = URL; 05 If (IMG. Complete ){ 06 Callback (IMG. Width, IMG. Height ); 07 }  Else  { 08 IMG. onload = Function  (){ 09 Callback (IMG. Width, IMG. Height ); 10 IMG. onload = Null  ; 11 }; 12}; 13 14 }; 

 

We can see that the size can be obtained only after the image is loaded. The speed is not flattering and we need to improve it.

Web ApplicationsProgramUnlike desktop applications, response speed is the best user experience. If you want to achieve both speed and elegance, you must obtain the image size in advance. How can you obtain the image size before loading the image?

More than a decade of online experience tells me that when loading images in a browser, you will see that the images will take up a piece of space before loading them. You do not need to preset the width and height attributes, because the browser can obtain the header data of the image. Based on this, you only need to use JavaScript to regularly detect the size status of the image to know that the image size is ready.

Of course, there will actually be some compatibility traps, such as the inconsistency between width and height detection in various browsers, and the images created by WebKit new image () will be affected by the URLs in the loading process, the best solution after repeated tests:

 

     //  Update: 02 //  05.27: 1. Ensure the callback execution sequence: Error> ready> load; 2. the callback function this points to the IMG itself. 03//  04-02: 1. Add the callback after the image is fully loaded. 2. improve performance. 04 05 /*  * 06 * image header data loading readiness event-Get image size faster 07 * @ version 1.01.05.2708 * <a href = "http://my.oschina.net/arthor" class = "Referer" target = "_ blank"> @ author </a> tangbin09 * <a href = "http://my.oschina.net/see" class = "Referer" target = "_ blank"> @ See </a> http://www.planeart.cn /? P = 112110 * @ Param {string} image path 11 * @ Param {function} Ready size 12 * @ Param {function} loaded (optional) 13 * @ Param {function} loading error (optional) 14 * @ example imgready ('HTTP: // www.google.com.hk/intl/zh-cn/images/logo_cn.png', function () {15 alert ('size ready: width = '+ this. width + '; Height =' + this. height); 16}); 17  */ 18 VaR Imgready = ( Function  (){ 19 VaR List = [], intervalid = Null  , 20 21 //  Used for queue execution 22 Tick = Function  (){ 23 VaR I = 0 ; 24 For (; I <list. length; I ++){ 25 List [I]. End ? List. splice (I --, 1 ): List [I] (); 26 }; 27! List. Length && Stop (); 28 }, 29 30 //  Stop all timer queues 31 Stop = Function  (){ 32 Clearinterval (intervalid ); 33Intervalid = Null  ; 34 }; 35 36 Return   Function  (URL, ready, load, error ){ 37 VaR  Onready, width, height, newwidth, newheight, 38 IMG = New  Image (); 39 40 IMG. SRC =URL; 41 42 //  If the image is cached, the cached data is directly returned. 43 If  (IMG. Complete ){ 44 Ready. Call (IMG ); 45 Load && Load. Call (IMG ); 46 Return  ; 47 }; 48 49 Width =IMG. width; 50 Height = IMG. height; 51 52 //  Events after loading errors 53 IMG. onerror = Function  (){ 54 Error && Error. Call (IMG ); 55 Onready. End = True  ; 56IMG = IMG. onload = IMG. onerror = Null  ; 57 }; 58 59 //  Picture size ready 60 Onready = Function  (){ 61 Newwidth = IMG. width; 62 Newheight = IMG. height; 63 If (Newwidth! = Width | newheight! = Height | 64 //  If the image has been loaded elsewhere, you can use area detection. 65 Newwidth * Newheight> 102466 ){ 67 Ready. Call (IMG ); 68 Onready. End = True  ; 69 }; 70 }; 71Onready (); 72 73 //  Fully loaded events 74 IMG. onload = Function  (){ 75 //  Onload may be faster than onready In the timer time difference range 76 //  Check here and ensure that onready takes priority 77! Onready. End && Onready (); 78 79 Load &&Load. Call (IMG ); 80 81 //  The ie gif animation will execute onload cyclically and leave the onload empty. 82 IMG = IMG. onload = IMG. onerror = Null  ; 83 }; 84 85 //  Regular execution in the queue 86 If (! Onready. End ){ 87 List. Push (onready ); 88//  At any time, only one timer is allowed to reduce browser performance loss. 89 If (Intervalid = Null ) Intervalid = setinterval (tick, 40 ); 90 }; 91 }; 92 })(); 

 

Call example:

 

 
Imgready ('HTTP: // www.google.com.hk/intl/zh-cn/images/logo_cn.png', function () {2 alert ('size ready: width = '+ this. width + '; Height =' + this. height); 3 });
 

Is it easy? In this way, the speed of obtaining photography-level photos is usually dozens of times higher than that of onload. However, for normal Web (within 800 × 600) browsing-level images, the effect of flash can be achieved. After reading this, I will recall the Web album you have seen. Can most of them be reconstructed? Well, please watch the pleasant Demo:

Http://www.planeart.cn/demo/imgReady/

(Tested browsers: chrome, Firefox, Safari, opera, IE6, IE7, and IE8)

Planeart.cn Original article, original address: http://www.planeart.cn /? P = 1121