DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript獲取圖片真實大小代碼實例
JavaScript獲取圖片真實大小代碼實例
編輯:關於JavaScript     

網頁頁面上的圖片尺寸似乎都千篇一律。我們最常見到的帶有多圖的文章頁面中,圖的大小通常是和頁面的寬度一致,這樣看起來,頁面就是一個直筒形,這樣的布局看多了就會覺得很單調。之所以形成這樣的局面,我想很大程度上是因為老式浏覽器的限制。但隨著現代浏覽器(火狐/谷歌/IE11)的普及,浏覽器對頁面設計的限制越來越少,Web程序員的想象能力能夠得到極大的發揮。

比如,冷知識:你知道每個視窗都有的 [x] 是怎麼來的嗎?這篇文章中,很多圖片超出了文本寬度的限制,給人一種參差錯落的感覺,同時,讓大圖片以其真實的尺寸展示,給人以更震撼的感覺。

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

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

復制代碼 代碼如下:
var img = $(“#img_id”); // Get my img elem
var pic_real_width, pic_real_height;
$(“<img/>”) // 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函數延時等待,最好的方法是使用圖片的onload事件。

為了避免CSS對圖片大小尺寸的影響,上面的代碼將圖片拷貝到內存中進行計算。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved