Implementation code based on jquery to prevent large images from breaking the page (immediate scaling)_jquery

In order to prevent the image from breaking the layout, the most common method is to obtain the image size after onload and then adjust it, so it will still break during the loading process. The picture of Qzone log has been improved here, and the original picture will be displayed after onload is completed. I have written a small example using onload before: http://www.planeart.cn/?p=1022

Using imgReady, you can achieve cross-browser image adaptation in dom ready without waiting for img to load. , the code is as follows:
(3-17 fixes an error pointed out by netizen crossyou, and the new version removes the replacement image)

Copy code The 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.documentElement.style,
// Check whether the IE7 browser is supported
isIE7 = ! -[1,] && !('prototype' in Image) && isMaxWidth;

$.fn.autoIMG = function () {
var maxWidth = this.width();

return this.find('img').each(function (i, img) {
// If the max-width attribute is supported, use this, otherwise use the following method
if (isMaxWidth) return img.style .maxWidth = maxWidth 'px';
var src = img.src;

// Hide original image
img.style.display = 'none';
img.removeAttribute(' src');

// Adjust the image immediately after obtaining the image header size data
imgReady(src, function (width, height) {
// Reduce the size proportionally
if (width > ; maxWidth) {
height = maxWidth / width * height,
width = maxWidth;
img.style.width = width 'px';
img.style.height = height 'px';
};
//Display original image
img.style.display = '';
img.setAttribute('src', src);
});

});
};

// IE7 zoomed pictures will be distorted, use private attributes to solve the problem through cubic interpolation
isIE7 && (function (c,d,s) {s=d.createElement ('style');d.getElementsByTagName('head')[0].appendChild(s);s.styleSheet&&(s.styleSheet.cssText =c)||s.appendChild(d.createTextNode(c))}) ('img {-ms-interpolation-mode:bicubic}',document);

/**
* Image header data loading ready event
* @see http://www.planeart.cn/?p=1121
* @param {String} Image path
* @param {Function} Size ready (parameter 1 receives width; parameter 2 receives height)
* @param {Function} loading completed (optional. Parameter 1 receives width; parameter 2 receives height)
* @param {Function} loading error ( Optional)
*/
var imgReady = (function () {
var list = [ ], intervalId = null,

// Used to execute queue
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, return the cached data directly
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 Area detection can be used when loading elsewhere
newWidth * newHeight > 1024
) {
ready(newWidth, newHeight);
check.end = true;
};
} ;
check();

// Event after loading error
img.onerror = function () {
error && error();
check.end = true;
img = img.onload = img.onerror = null;
};

// Completely loaded event
img.onload = function () {
load && load (img.width, img.height);
!check.end && check();
// IE gif animation will execute onload in a loop, just leave onload blank
img = img.onload = img .onerror = null;
};

// Add to the queue and execute regularly
if (!check.end) {
list.push(check);
// No matter When only one timer is allowed to appear to reduce browser performance loss
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})( );

})(jQuery);

autoIMG compressed: 1.74kb, compatible with: Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | …

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

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

Postscript: Although with the previous This article paved the way for imgReady technology. I thought it would be very simple to implement this image adaptive plug-in, but in the process I encountered a problem with the webkit-based browser. Later I learned that webkit had a BUG that had not been fixed and webkit could not be interrupted. img download. After struggling for a long time, I updated the imgReady function and this example.

Package download address