用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对图片大小尺寸的影响,上面的代码将图片拷贝到内存中停止运算。
假如你的页面是老式页面,你可以按需把这段代码嵌入页面底部,它不需要你修改原有页面。
参照 stackoverflow
引荐教程:《javascript根基教程》
以上就是用JavaScript猎取图片的真实尺寸大小的办法详解的具体内容,更多请关注百分百源码网其它相关文章!