JavaScript简单获取页面图片原始尺寸的方法


Posted in Javascript onJune 21, 2016

本文实例讲述了JavaScript简单获取页面图片原始尺寸的方法。分享给大家供大家参考,具体如下:

这里通过Image()对象获取原始宽高

这种方式就没有那么麻烦,直接new一个Image()对象,然后把img的src赋值给他即可获取。

var img = new Image();
img.src = $("#target").attr("src");
if(img.complete){
  alert('width:'+img.width+',height'+img.height);
  img = null;
}else{
  img.onload = function(){
    alert('width:'+img.width+',height'+img.height);
    img = null;
  };
}

并且不要担心new Image对象会多一个http请求,浏览器加载图片后已经有缓存,你new N个image对象都没问题,当然,内存会消耗,所以用完后img置为null。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 #Javascript
js简单判断flash是否加载完成的方法
Jun 21 #Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 #Javascript
JS实现获取剪贴板内容的方法
Jun 21 #Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 #Javascript
Javascript打印局部页面实例
Jun 21 #Javascript
第六篇Bootstrap表格样式介绍
Jun 21 #Javascript
You might like
PHP5/ZendEngine2的改进
2006/10/09 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
深入理解Python装饰器
2016/07/27 Python
Python 类的继承实例详解
2017/03/25 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python中 * 的用法详解
2019/07/10 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
爸爸的花儿落了教学反思
2014/02/20 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
详解php中流行的rpc框架
2021/05/29 PHP
比较几种Redis集群方案
2021/06/21 Redis
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python