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 面向对象的之私有成员和公开成员
May 04 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
js格式化时间的方法
Dec 18 Javascript
详谈javascript异步编程
Feb 21 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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中Session的概念
2006/10/09 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php实现的中文分词类完整实例
2017/02/06 PHP
PHP实现的注册,登录及查询用户资料功能API接口示例
2017/06/06 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python计算二维矩形IOU实例
2020/01/18 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
美国知名生活购物网站:Goop
2017/11/03 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
法律意见书范文
2015/06/04 职场文书
电工生产实习心得体会
2016/01/22 职场文书
Java完整实现记事本代码
2022/06/16 Java/Android