Implement code based on jquery to prevent large images from breaking the page (scale now)

To prevent Image Layout from being broken, the most common practice is to get the image size after onload and then adjust it. Therefore, it will still be broken during the loading process. The Qzone log image is improved here, and the original image is displayed only after onload is completed. I used to write a small example with onload: http://www.planeart.cn /? P = 1022

With imgReady, you can achieve image self-adaptation in dom ready across Browsers without waiting for img to load. The Code is as follows:
(3-17 fixed an error in crossyou, and the new version removed the replaced image)Copy codeThe Code is as follows: // jquery. autoIMG. js-2010-04-02-Tang Bin-http://planeArt.cn/-MIT Licensed
(Function ($ ){
// Check whether the css2.1 max-width attribute is supported
Var isMaxWidth = 'maxwidth' in document.doc umentElement. style,
// Check whether the Internet Explorer 7 is used
IsIE7 =! -[1,] &! ('Prototype' in Image) & isMaxWidth;

$. Fn. autoIMG = function (){
Var maxWidth = this. width ();

Return this. find ('img '). each (function (I, img ){
// Use this parameter if the max-width attribute is supported; otherwise, use the following method:
If (isMaxWidth) return img. style. maxWidth = maxWidth + 'px ';
Var src = img. src;

// Hide the source Image
Img. style. display = 'none ';
Img. removeAttribute ('src ');

// Adjust the image immediately after obtaining the size data of the Image Header
ImgReady (src, function (width, height ){
// Proportional reduction
If (width> maxWidth ){
Height = maxWidth/width * height,
Width = maxWidth;
Img. style. width = width + 'px ';
Img. style. height = height + 'px ';
};
// Display the source Image
Img. style. display = '';
Img. setAttribute ('src', src );
});

});
};

// The image scaled by IE7 will be distorted, and the private attributes are resolved through cubic Interpolation.
IsIE7 & (function (c, d, s) plain Text + = c) | s. appendChild (d. createTextNode (c)}) ('img {-ms-interpolation-mode: bicubic} ', document );

/**
* Image header data loading readiness event
* @ See http://www.planeart.cn /? P = 1121
* @ Param {String} image path
* @ Param {Function} the size is ready (parameter 1 receives width; parameter 2 receives height)
* @ Param {Function} loaded (optional. Parameter 1 receives width; parameter 2 receives height)
* @ Param {Function} loading error (optional)
*/
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 check, 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 (img. width, img. height );
Load & load (img. width, img. height );
Return;
};

// Detect image size changes
Width = img. width;
Height = img. height;
Check = 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 (newWidth, newHeight );
Check. end = true;
};
};
Check ();

// Load the event after the error
Img. onerror = function (){
Error & error ();
Check. end = true;
Img = img. onload = img. onerror = null;
};

// Events that have been fully loaded
Img. onload = function (){
Load & load (img. width, img. height );
! Check. end & check ();
// 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 (! Check. end ){
List. push (check );
// Only one timer is allowed at a time to reduce the performance loss of the browser.
If (intervalId = null) intervalId = setInterval (tick, 40 );
};
};
})();

}) (JQuery );

AutoIMG: 1.74kb after compression, compatible with: Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 |...

Call demo: $ ('# demo p'). autoIMG ()

Similarly, the pleasant DEMO address is here: http://demo.jb51.net/js/2011/autoimg/

Note: Although I thought it would be easy to implement this image adaptive plug-in with imgReady Technology in the previous article, but in the process, the browser in the webkit kernel encountered a flaw, later, I learned that the BUG in webkit has not been fixed and webkit cannot interrupt img download. I updated the imgReady function and the example after a long time.

Package