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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
js实现获取div坐标的方法
Nov 16 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
js逆向解密之网络爬虫
May 30 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
再探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 设计模式之 工厂模式
2008/12/19 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
php遍历目录方法小结
2015/03/10 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
javascript英文日期(有时间)选择器
2007/05/02 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
python多线程用法实例详解
2015/01/15 Python
python实现多线程的两种方式
2016/05/22 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
经济信息系毕业生自荐信范文
2014/03/15 职场文书
煤矿安全协议书
2014/08/20 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
欢迎词范文
2015/01/27 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS