A simple way to get pictures
The code is as follows |
Copy Code |
The time stamp behind the picture address is to avoid caching var img_url = '/static/upload/2013/13643608813441.jpg? ' +date.parse (New Date ()); Creating objects var img = new Image (); Change the src of the picture IMG.SRC = Img_url; Print Alert (' Width: ' +img.width+ ', Height: ' +img.height); |
Perform:
The width is 0, the result is normal, because the picture has no data to be loaded before it's wide and high default is 0
So it can be optimized!
Second, the onload after printing
The code is as follows |
Copy Code |
The time stamp behind the picture address is to avoid caching var img_url = '/static/upload/2013/13643608813441.jpg? ' +date.parse (New Date ()); Creating objects var img = new Image (); Change the src of the picture IMG.SRC = Img_url; Load Complete execution Img.onload = function () { Print Alert (' Width: ' +img.width+ ', Height: ' +img.height); };
|
Perform:
Through the onload can get the picture of the wide height. But the onload larger figure is usually slow, not practical, but as long as the picture is cached by the browser, then the picture loading almost do not have to wait to trigger the onload, we want to be placeholders. So some people can also write this by caching.
Third, through the complete and the onload mixed use
To test the caching effect, note that the following test picture's URL does not add a timestamp
The code is as follows |
Copy Code |
//photo address var img_url = '/static/upload/2013/13643608813441.jpg '; //Create Object & nbsp var img = new Image (); //Change src Img.src = img_url; //Determine if there is a cache if (img.complete) { //Print & nbsp alert (' from:complete:width: ' +img.width+ ', Height: ' +img.height); } else{ //load Complete execution img.onload = function () { //printing alert (' from:onload:width: ' +img.width+ ', Height: ' +img.height '); }; } |
The first execution, always the OnLoad trigger
You refresh again, almost all of the cache triggers
Read the width of the picture from the cache needless to say, very convenient and fast, today we have to solve is not cached and fast compared to the onload faster way to get the picture of the width of the height. We often know that some pictures are not completely down, but they already have placeholders, and then 1.1 points of loading. Since there are placeholders that should be returned after the request for a picture resource server response. When the server responds and returns a wide range of data without triggering an event, such as the OnLoad event. And then a fourth method was created.
Four, through the regular cycle detection to obtain
Take a look at the following example, in order to avoid reading data from the cache, each request has a timestamp:
The code is as follows |
Copy Code |
Picture Address var img_url = '/static/upload/2013/13643608813441.jpg? ' +date.parse (New Date ()); Creating objects var img = new Image (); Change the src of the picture IMG.SRC = Img_url; Timed execution gets a wide-high var check = function () { Document.body.innerHTML = ' <div>from:<span style= ' color:red; >check</span>: Width: ' +img.width+ ', Height: ' +img.height+ ' </div> '; }; var set = SetInterval (check,40); Load Complete Get width high Img.onload = function () { Document.body.innerHTML = ' <div>from:<span style= ' Color:blue ' >onload</span>: Width: ' +img.width+ ', Height: ' +img.height+ ' </div> '; Cancel timed gain width high Clearinterval (set); }; |
Through the above tests, we found that the time to detect the picture width is much faster than the onload, the more lines of print for the onload longer, 40 milliseconds to execute once, basic 100 milliseconds to get the picture's width, chrome even in the first cycle of the time has been obtained data. From the above data to analyze, in fact, we can be in the timing function to judge as long as the picture of the width of more than 0 indicates that the correct picture has been achieved wide height. Let's take the time to see how long it takes to get the width or the onload to get the height by timing.
Code:
The code is as follows |
Copy Code |
var start_time = new Date (). GetTime (); Picture Address var img_url =/desk/bizhi/image/2/2560x1600/1365477614755.jpg? ' +start_time; Creating objects var img = new Image (); Change the src of the picture IMG.SRC = Img_url; Timed execution gets a wide-high var check = function () { As long as either party is greater than 0 Indicates that the server has already returned a wide height if (img.width>0 | | img.height>0) { var diff = new Date (). GetTime ()-start_time; Document.body.innerHTML = ' <div>from:<span style= ' color:red; >check</span>: Width: ' +img.width+ ', Height: ' +img.height+ ', Time: ' +diff+ ' ms</div> '; Clearinterval (set); } }; var set = SetInterval (check,40); Load Complete Get width high Img.onload = function () { var diff = new Date (). GetTime ()-start_time; Document.body.innerHTML = ' <div>from:<span style= ' Color:blue ' >onload</span>: Width: ' +img.width+ ', Height: ' +img.height+ ', Time: ' +diff+ ' ms</div> '; }; |
FireFox:
This is a 2560 * 1600 size of the picture, the results of each browser can be seen by the rapid acquisition of image size almost all within 200 milliseconds, and the onload at least five seconds above, the difference is that the rapid acquisition of picture width is very practical
Finally, to add a common online js to get a picture of the high width of the code
JS get the actual width of the picture, and according to the size of the image adaptive
The code is as follows |
Copy Code |
function adapt () { var tablewidth = $ ("#imgTable"). width (); Table width var img = new Image (); Img.src =$ (' #imgs '). attr ("src"); var imgwidth = img.width; Picture actual width if (imgwidth<tablewidth) { $ (' #imgs '). attr ("style", "Width:auto"); }else{ $ (' #imgs '). attr ("style", "width:100%"); } } |
JS dynamically get the size of the picture
The code is as follows |
Copy Code |
var _w = parseint ($ (window). width ());//Get browser widths $ (". New_mess_c img"). each (function (i) { var img = $ (this); The true width of Var realwidth;// The true height of Var realheight;// Here's how to do this, $ ("$ ("/* If you want to get the true width and height of the picture there are three points to note 1, need to create an image object: such as Here $ ("2, specify the SRC path of the picture 3, must be in the picture after the completion of loading, such as. load () function execution */ Realwidth = This.width; Realheight = This.height; If the true width is greater than the width of the browser, show 100% if (realwidth>=_w) { $ (IMG). CSS ("width", "100%"). CSS ("height", "Auto"); } else{//if the width of the browser is less than the original size display $ (IMG). CSS ("width", realwidth+ ' px '). CSS ("height", realheight+ ' px '); } }); }); |