JavaScript code _ javascript skills

This article describes how to use JavaScript to obtain the real size code of an image. This article uses the onload event to obtain the actual size of the image. For more information, see the picture sizes on the webpage. In the most common article page with multiple graphs, the size of the graph is usually the same as the width of the page. In this way, the page looks like a straight tube, if this layout is too much, it will feel monotonous. I think this is largely because of the limitations of old-fashioned browsers. However, with the popularity of modern browsers (Firefox/Google/IE11), browsers have fewer and fewer restrictions on page design, and the imagination of Web programmers can be greatly improved.

For example, cool knowledge: Do you know how [x] is available in every window? In this article, many images exceed the text Width limit, which gives a sense of misplacement. At the same time, big images are displayed in their real sizes, it gives people a more shocking feeling.

However, technically, we can easily use the maximum width of the text to limit the image so that they all keep a width, without pressing the width of the text, we need the size of each image. We can declare the original size of the image when editing on the server. A more flexible method is to dynamically obtain the original size of the image by placing a piece of js on the page, and dynamically change the display size of the image. In this way, the image can be compatible with the largest width of the old text, and the original size of the image can be displayed as needed.

How can I use JavaScript to obtain the original size of an image in a browser?

The Code is as follows:

Var img = $ ("# img_id"); // Get my img elem
Var pic_real_width, pic_real_height;
$ ("") // Make in memory copy of image to avoid css issues
. Attr ("src", $ (img). attr ("src "))
. Load (function (){
Pic_real_width = this. width; // Note: $ (this). width () will not
Pic_real_height = this. height; // work for in memory images.
});

The Webkit browser (Google Chrome, etc.) is used to obtain the height and width value after the loaded event of the image. Therefore, you cannot use the timeout function for delayed wait. The best way is to use the onload event of the image.

To avoid the effect of CSS on the image size and size, the code above copies the image to the memory for calculation.

If your page is an old-fashioned page, you can embed this code into the bottom of the page as needed without modifying the original page.