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

// 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);