In order to prevent the picture burst layout, the most common is still through the onload after the picture size and then adjust, so the loading process will still burst. And the picture of the Qzone log in this has been improved, the onload after the original image display. I used to use the onload to write a small example: http://www.planeart.cn/?p=1022
The Imgready can be adapted across browsers in Dom ready, without waiting for an IMG load, as follows:
Copy Code code as follows:
JQuery.autoIMG.js v0.2
Tang bin-http://planeart.cn/-MIT Licensed
(function ($) {
var//Set the replacement image of the loading state
TempPath = './images/loading.png ',
To set a replacement image for a load error
Errorpath = './images/error.png ',
Detect whether css2.1 Max-width properties are supported
Ismaxwidth = ' maxwidth ' in Document.documentElement.style,
Detect if IE7 browser
IsIE7 =!-[1,] &&! (' prototype ' in Image) && ismaxwidth;
New Image (). src = TempPath;
$.fn.autoimg = function () {
var $this = this,
Get container width
MaxWidth = $this. Width ();
Return $this. Find (' img '). Each (function (I, IMG) {
Use this if you support the Max-width property, otherwise use the following preload 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 an IMG image and replace it with a loading picture
Img.style.display = ' None ';
Img.removeattribute (' src ');
Img.parentNode.removeChild (IMG);
TEMP.SRC = TempPath;
Next? Next.insertbefore (temp): Parent.appendchild (temp);
Picture size ready to execute
Imgready (Path, function (width, height) {
if (Width > maxwidth) {
Equal proportional scaling
Height = maxwidth/width * height,
width = maxwidth;
Delete Loading image
Temp.parentNode.removeChild (temp);
Restore the original image after the adjustment is displayed
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 () {
Load Error
TEMP.SRC = Errorpath;
Temp.title = ' Image load error! ';
});
});
};
IE7 zoom image will be distorted, using private property through three interpolation solution
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);
Get dimension data for picture headers
http://www.planeart.cn/?p=1121
@param {String} picture path
@param {function} Gets the callback function for the dimension (parameter 1 receives width; parameter 2 receives height)
@param {function} Load Error 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 picture is cached, the cached data is returned directly
if (img.complete) {
Return callback (Img.width, img.height);
};
Inserts a hidden image into the page, listens for picture size ready status
if (container) {
div = doc.createelement (' div ');
Div.style.cssText = ' Visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden ';
Div.appendchild (IMG)
Container.appendchild (DIV);
width = img.offsetwidth;
Height = img.offsetheight;
Check = function () {
offsetwidth = Img.offsetwidth;
offsetheight = Img.offsetheight;
If the image size starts to change, it means that the browser has acquired the image header data and occupies a bit
Only the monitoring img.offsetwidth is effective, and the img.offsetheight is for insurance.
If the area of the newly inserted picture is larger than the preset size, it is most likely to be a pre-executed picture and to be loaded elsewhere, such as WebKit based browsers
if (offsetwidth!== width | | offsetheight!== Height | | offsetwidth * offsetheight > accuracy) {
Clearinterval (Intervalid);
Callback (offsetwidth, offsetheight);
Empty IMG events and elements to avoid IE memory leaks
Img.onload = null;
div.innerhtml = ';
Div.parentNode.removeChild (DIV);
};
};
Check ();
Perform tests on a regular basis
Intervalid = setinterval (check, 150);
};
Wait for the picture to load completely
This is an insurance operation, which is enabled if the above listener size method fails
If a small image is likely to load less than the timer-defined detection interval, the timer is stopped
Img.onload = function () {
Callback (Img.width, img.height);
Img.onload = Img.onerror = null;
Clearinterval (Intervalid);
Container && img.parentNode.removeChild (IMG);
};
Image Load Error
Img.onerror = function () {
Error && error ();
Clearinterval (Intervalid);
Container && img.parentNode.removeChild (IMG);
};
};
}) (JQuery);
Autoimg after compression: 1.74KB, compatible: Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ...
Invoke Demo: $ (' #demo p '). AUTOIMG ()
Similarly, the delightful demo address is here: http://demo.jb51.net/js/2011/autoimg/
PostScript: Although there is an article on the matting of Imgready technology, I thought it would be very simple to realize this picture adaptive plug-ins, but the process in the WebKit kernel browser touched the rebuff, later learned that WebKit bug has not been repaired, I toss for a long time after updating the Imgready function.
Package Download Address
