JavaScript get picture Real size code instance _javascript tips

The size of the pictures on the page appears to be the same. Our most common to have a multiple-picture article page, the size of the picture is usually the same as the width of the page, so that the page is a straight tube shape, so the layout look more will feel very monotonous. The reason for this situation, I think, is largely due to the limitations of old-fashioned browsers. But with the popularity of modern browsers (Firefox/Google/ie11), the browser's restrictions on page design are getting less and more, the ability of the Web Programmer's imagination can be greatly played.

For example, cold knowledge: Do you know what every window has [x] come from? In this article, many pictures are beyond the limits of text width, giving people a sense of jumble, while allowing large images to be displayed in their true size, giving people a more shocking feeling.

But technically, we can easily limit the text to the maximum width of the picture, so that they all maintain a width, but not the width of the text, we need each picture of their own size. We can declare the original size of the picture when we edit the service side. And a more flexible way is by placing a section of JS on the page to dynamically get the original size of the picture, dynamically changing the display size of the picture. This will be compatible with the old text of the maximum width of the way, but also when needed to make the picture appear in its original size.

How do I get the original size of a picture in a browser with JavaScript?

Copy Code code as follows:

var img = $ ("#img_id"); Get my img elem
var pic_real_width, Pic_real_height;
$ (". attr ("src", $ (IMG). attr ("src"))
. Load (function () {
Pic_real_width = This.width; Note: $ (this). Width () won't
Pic_real_height = This.height; Work for in memory images.
});

WebKit Browser (Google browser, etc.) is the image of the loaded event to get the height and width values. So, you can't use the timeout function to delay the wait, the best way is to use the OnLoad event of the picture.

To avoid the effect of CSS on the size of the picture, the above code copies the picture into memory for calculation.

If your page is a vintage page, you can embed the code on demand to the bottom of the page, and it doesn't require you to modify the original page.