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 相关文章推荐
JavaScript省市联动实现代码
Feb 15 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
用js编写留言板
Mar 17 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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使用Jpgraph创建折线图效果示例
2017/02/15 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
理解Python垃圾回收机制
2016/02/12 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
求职信写作要突出重点
2014/01/01 职场文书
渡河少年教学反思
2014/02/12 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
质量安全标语
2014/06/07 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
产品委托授权书范本
2014/09/16 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
python基础详解之if循环语句
2021/04/24 Python