If the image is not inserted into the DOM tree in the case of pre-loading, and it is not affected by the CSS rules, just take its IMG. Width and IMG. Height. For more information, see <a href = "http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html">.
Function LoadImage (URL, callback) {var IMG = new image (); IMG. onload = function () {IMG. onload = NULL; callback. call (IMG, IMG. width, IMG. height)} IMG. src = URL ;}
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> preload an image by situ zhengmei </title> </P> <p> <style> <br/> # image {<br/> width: 200px; <br/> Height: 200px; <br/>}< br/> </style> <br/> <SCRIPT> </P> <p> function LoadImage (URL, callback) {<br/> var IMG = new image (); <br/> IMG. onload = function () {<br/> IMG. onload = NULL; <br/> callback. call (IMG, IMG. width, IMG. height) <br/>}< br/> IMG. src = URL; <br/>}< br/> LoadImage ("http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg", function (W, h) {<br/> alert ([W, H]) <br/> }) <br/> </SCRIPT> <br/> </pead> <br/> <body> </P> <p> </body> <br/> </ HTML> <br/>
RunCode
However, if the original size of an image is obtained after the DOM tree is created, there are two convenient attributes (naturalwidth, naturalheight) in Safari, Firefox, chrome, and opera10 +) this can be done.
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> obtain the original image size by situ zhengmei </title> <br/> <SCRIPT> <br/> window. onload = function () {<br/> var IMG = document. getelementbyid ("IMG"); <br/> alert (IMG. width + '*' + IMG. height); // the size of the application <br/> alert (IMG. naturalwidth + '*' + IMG. naturalheight); // original size <br/>}< br/> </SCRIPT> <br/> <style> <br/> Div {<br/> width: 200px; <br/> Height: 200px; <br/>}< br/> Div IMG {<br/> border: 3px solid salmon; <br/> margin: 2pt; <br/> width: 87%; <br/> Height: 9em; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <div> <br/> <br/> </div> <br/> </body> <br/> </ptml> </P> <p>
Run code
For earlier versions of IE and opera, we are not so lucky. We need to change the angle of view from finding the original size of the current image to the size of another image with the same URL.
Function getactualsize (IMG) {var testee = new image; // get a substitute for testee. style. position = 'absolute '; testee. style. visibility = 'did'; testee. style. top = testee. style. left = '0px '; document. body. appendchild (testee); testee. src = IMG. SRC; var width = testee. width; var Height = testee. height; testee. parentnode. removechild (testee); Return {width: width, height: height };}
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> obtain the original image size by situ zhengmei </title> <br/> <SCRIPT> </P> <p> function getactualsize (IMG) {<br/> var testee = new image; // get a replacement <br/> testee. style. position = 'absolute '; <br/> testee. style. visibility = 'ddn'; <br/> testee. style. top = testee. style. left = '0px '; <br/> document. body. appendchild (testee); <br/> testee. src = IMG. SRC; <br/> var width = testee. width; <br/> var Height = testee. height; <br/> testee. parentnode. removechild (testee); <br/> return {width: width, height: height };< br/>}</P> <p> window. onload = function () {<br/> var IMG = document. getelementbyid ("IMG"); <br/> var size = getactualsize (IMG); <br/> alert ([size. width, size. height]) <br/>}</P> <p> </SCRIPT> <br/> <style> <br/> Div {<br/> width: 200px; <br/> Height: 200px; <br/>}< br/> Div IMG {<br/> border: 3px solid salmon; <br/> margin: 2pt; <br/> width: 87%; <br/> Height: 9em; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <div> <br/> <br/> </div> <br/> </body> <br/> </ptml> <br/>
Run code
Although this method does not send requests because of caching, you need to create one more element as the measurement object, with a high overhead. Is there a better way? We can consider the three style attributes of IE, style, currentstyle and runtimestyle. Currently, we only need to use runtimestyle. It has a feature that you can redraw the original elements without synchronizing the style. We can directly set it in runtimestyle, get the relevant value, and then reset it.
Function getactualsize (IMG) {var run = IMG. runtimestyle; var mem = {W: Run. width, H: Run. height}; // Save the original size run. width = run. height = "Auto"; // rewrite var W = IMG. width; // obtain the current size var H = IMG. height; run. width = mem. w; // restore run. height = mem. h; return {width: W, height: H };}
<Br/> <! Doctype HTML> <br/> <pead> <br/> <title> obtain the original image size by situ zhengmei </title> <br/> <SCRIPT> </P> <p> function getactualsize (IMG) {<br/> var run = IMG. runtimestyle; <br/> var mem = {W: Run. width, H: Run. height}; // Save the original size <br/> Run. width = run. height = "Auto"; // rewrite <br/> var W = IMG. width; // obtain the current size <br/> var H = IMG. height; <br/> Run. width = mem. w; // restore <br/> Run. height = mem. h; <br/> return {width: W, height: H };< br/>}</P> <p> window. onload = function () {<br/> var IMG = document. getelementbyid ("IMG"); <br/> var size = getactualsize (IMG); <br/> alert ([size. width, size. height]) <br/>}</P> <p> </SCRIPT> <br/> <style> <br/> Div {<br/> width: 200px; <br/> Height: 200px; <br/>}< br/> Div IMG {<br/> border: 3px solid salmon; <br/> margin: 2pt; <br/> width: 87%; <br/> Height: 9em; <br/>}< br/> </style> <br/> </pead> <br/> <body> <br/> <div> <br/> <br/> </div> <br/> </body> <br/> </ptml> <br/>
run the Code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
