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:
Copy codeThe Code is as follows: // jQuery. autoIMG. js v0.2
// Tang Bin-http://planeArt.cn/-MIT Licensed
(Function ($ ){
Var // set the loading status replacement Image
TempPath = './images/loading.png ',
// Set the wrong replacement image for loading
ErrorPath = './images/error.png ',
// Check whether the css2.1 max-width attribute is supported
IsMaxWidth = 'maxwidth' in document.doc umentElement. style,
// Check whether the Internet Explorer 7 is used
IsIE7 =! -[1,] &! ('Prototype' in Image) & isMaxWidth;
New Image (). src = tempPath;
$. Fn. autoIMG = function (){
Var $ this = this,
// Obtain the container width
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 pre-loading method.
If (isMaxWidth) return img. style. maxWidth = maxWidth + 'px ';
Var path = img. getAttribute ('data-src') | img. src,
Next = img. nextSibling,
Parent = img. parentNode,
Temp = new Image ();
// Delete the img image and replace it with the loading Image
Img. style. display = 'none ';
Img. removeAttribute ('src ');
Img. parentNode. removeChild (img );
Temp. src = tempPath;
Next? Next. insertBefore (temp): parent. appendChild (temp );
// The image size is ready for execution
ImgReady (path, function (width, height ){
If (width> maxWidth ){
// Proportional Scaling
Height = maxWidth/width * height,
Width = maxWidth;
// Delete the loading Image
Temp. parentNode. removeChild (temp );
// Restore the display of the adjusted Original Image
Img. style. display = '';
Img. style. width = width + 'px ';
Img. style. height = height + 'px ';
Img. setAttribute ('src', path );
Next? Next. insertBefore (img): parent. appendChild (img );
};
}, Function (){
// Loading error
Temp. src = errorPath;
Temp. title = 'image load error! ';
});
});
};
// 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 );
// Obtain the size data of the Image Header
// Http://www.planeart.cn /? P = 1121
// @ Param {String} image path
// @ Param {Function} callback Function for obtaining the size (parameter 1 receives width; parameter 2 receives height)
// @ Param {Function} load the wrong callback Function (optional)
Var imgReady = function (url, callback, error ){
Var width, height, offsetWidth, offsetHeight, intervalId, check, div,
Accuracy = 1024,
Doc = document,
Container = doc. body | doc. getElementsByTagName ('head') [0],
Img = new Image ();
Img. src = url;
// If the image is cached, the cached data is directly returned.
If (img. complete ){
Return callback (img. width, img. height );
};
// Insert a hidden image to the page to listen to the ready size of the image
If (container ){
Div = doc. createElement ('div ');
Div.style.css Text = 'visibility: hidden; position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: Den den ';
Div. appendChild (img)
Container. appendChild (div );
Width = img. offsetWidth;
Height = img. offsetHeight;
Check = function (){
OffsetWidth = img. offsetWidth;
OffsetHeight = img. offsetHeight;
// If the image size changes, it indicates that the browser has obtained the image header data and occupied the space.
// After the test, only the img. offsetWidth listener is valid. At the same time, the img. offsetHeight check is performed to insure
// If the area of the newly inserted image is larger than the preset size, it is likely that the pre-image is executed and loaded elsewhere, such as the webkit-based browser.
If (offsetWidth! = Width | offsetHeight! = Height | offsetWidth * offsetHeight> accuracy ){
ClearInterval (intervalId );
Callback (offsetWidth, offsetHeight );
// Clear img events and elements to avoid IE Memory leakage
Img. onload = null;
Div. innerHTML = '';
Div. parentNode. removeChild (div );
};
};
Check ();
// Perform regular detection
IntervalId = setInterval (check, 150 );
};
// Wait until the image is fully loaded
// This is an insurance operation. If the above listening size method fails, this will be enabled
// If the loading time of a small image may be less than the detection interval defined by the timer, the timer will be stopped.
Img. onload = function (){
Callback (img. width, img. height );
Img. onload = img. onerror = null;
ClearInterval (intervalId );
Container & img. parentNode. removeChild (img );
};
// Image loading error
Img. onerror = function (){
Error & error ();
ClearInterval (intervalId );
Container & img. parentNode. removeChild (img );
};
};
}) (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 webkit has bugs that have not been fixed. After a long time, I updated the imgReady function.
Package
