JavaScript获取图片真实大小代码实例


Posted in Javascript onSeptember 24, 2014

网页页面上的图片尺寸似乎都千篇一律。我们最常见到的带有多图的文章页面中,图的大小通常是和页面的宽度一致,这样看起来,页面就是一个直筒形,这样的布局看多了就会觉得很单调。之所以形成这样的局面,我想很大程度上是因为老式浏览器的限制。但随着现代浏览器(火狐/谷歌/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对图片大小尺寸的影响,上面的代码将图片拷贝到内存中进行计算。

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

Javascript 相关文章推荐
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 Javascript
第一次接触神奇的Bootstrap导航条
Aug 09 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
再探JavaScript作用域
Sep 24 #Javascript
深入理解javascript原型链和继承
Sep 23 #Javascript
深入理解javascript构造函数和原型对象
Sep 23 #Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 #Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 #Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
深入理解javascript作用域和闭包
Sep 23 #Javascript
You might like
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
Javascript valueOf 使用方法
2008/12/28 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
微信小程序实现跑马灯效果
2020/10/21 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
python快速排序代码实例
2013/11/21 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python extract及contains方法代码实例
2020/09/11 Python
优秀教师演讲稿
2014/05/06 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
新品发布会策划方案
2014/06/08 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
世界遗产导游词
2015/02/13 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Java存储没有重复元素的数组
2022/04/29 Java/Android
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android