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 相关文章推荐
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
angular.bind使用心得
Oct 26 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
node+multer实现图片上传的示例代码
Feb 18 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
PHP session会话的安全性分析
2011/09/08 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
jquery解析JSON数据示例代码
2014/03/17 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
Python编程中的for循环语句学习教程
2015/10/14 Python
python中set常用操作汇总
2016/06/30 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
保护母亲河倡议书
2014/04/14 职场文书
消防安全宣传标语
2014/06/07 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书