快捷導(dǎo)航

JavaScript獲取圖片真實(shí)大小代碼實(shí)例

更新時(shí)間：2014年09月24日 09:06:28 投稿：junjie

這篇文章主要介紹了JavaScript獲取圖片真實(shí)大小代碼實(shí)例,本文使用onload事件來(lái)獲取圖片的真實(shí)大小,需要的朋友可以參考下

網(wǎng)頁(yè)頁(yè)面上的圖片尺寸似乎都千篇一律。我們最常見(jiàn)到的帶有多圖的文章頁(yè)面中，圖的大小通常是和頁(yè)面的寬度一致，這樣看起來(lái)，頁(yè)面就是一個(gè)直筒形，這樣的布局看多了就會(huì)覺(jué)得很單調(diào)。之所以形成這樣的局面，我想很大程度上是因?yàn)槔鲜綖g覽器的限制。但隨著現(xiàn)代瀏覽器(火狐/谷歌/IE11)的普及，瀏覽器對(duì)頁(yè)面設(shè)計(jì)的限制越來(lái)越少，Web程序員的想象能力能夠得到極大的發(fā)揮。

比如，冷知識(shí)：你知道每個(gè)視窗都有的 [x] 是怎么來(lái)的嗎？這篇文章中，很多圖片超出了文本寬度的限制，給人一種參差錯(cuò)落的感覺(jué)，同時(shí)，讓大圖片以其真實(shí)的尺寸展示，給人以更震撼的感覺(jué)。

但從技術(shù)上，我們可以輕松的用文本的最大寬度限制圖片，讓它們都保持一個(gè)寬度，而不按文本的寬度時(shí)，我們就需要每個(gè)圖片的自己的尺寸。我們可以在服務(wù)端編輯時(shí)聲明圖片的原始尺寸。而一種更靈活的方式是通過(guò)在頁(yè)面上放一段js來(lái)動(dòng)態(tài)的獲取圖片的原始大小尺寸，動(dòng)態(tài)改變圖片的顯示大小。這樣即能兼容老的也文本最大寬度的方式，還可以在需要的時(shí)候讓圖片呈現(xiàn)出其原始的大小。

如何用JavaScript在瀏覽器端獲取圖片的原始尺寸大小？

復(fù)制代碼代碼如下:

var img = $(“#img_id”); // Get my img elem

var pic_real_width, pic_real_height;

$(“&lt;img/&gt;”) // 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.

});

Webkit瀏覽器(谷歌瀏覽器等)是在圖片的loaded事件之后才能獲取高度和寬度值。所以，你不能使用timeout函數(shù)延時(shí)等待，最好的方法是使用圖片的onload事件。

為了避免CSS對(duì)圖片大小尺寸的影響，上面的代碼將圖片拷貝到內(nèi)存中進(jìn)行計(jì)算。

如果你的頁(yè)面是老式頁(yè)面，你可以按需把這段代碼嵌入頁(yè)面底部，它不需要你修改原有頁(yè)面。

您可能感興趣的文章: