JQ获取动态加载的图片大小的正确方法分享


Posted in Javascript onNovember 08, 2013

有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
jQuery load()事件处理的BUG, 当图片是从浏览器缓存取得时, 获取的是错误的尺寸.
错误的代码是:
(错误)在添加了HTML之后立即调用代码获取尺寸

var html = '';

$('#my_div').html(html);

var width = $('#my_div img').width(); // may return 0

(错误)用jQuery的load()事件处理

var html = '';

var img = $(html);

html.load(function(){

// return 0 if image is loaded from browser cache

var width = img.width();

});

$('#my_div').html(img);

下面这种才是真正正确的方法, 使用JavaScript的Image类:
正确的方法

var html = '';

$('#my_div').html(html);

var ni = new Image();

ni.onload = function(){

var width = ni.width;

}

ni.src = img.attr(URL);
Javascript 相关文章推荐
js获取当前日期前七天的方法
Feb 28 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
JS事件绑定的常用方式实例总结
Mar 02 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
微信小程序实现聊天室功能
Jun 14 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 #Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 #Javascript
js去除空格的12种实用方法
Nov 08 #Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 #Javascript
javascript获取url上某个参数的方法
Nov 08 #Javascript
jqgrid 编辑添加功能详细解析
Nov 08 #Javascript
动态加载JS文件的三种方法
Nov 08 #Javascript
You might like
咖啡冲泡指南 咖啡有哪些制作方式 单品咖啡 意式咖啡
2021/03/06 冲泡冲煮
php win下Socket方式发邮件类
2009/08/21 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
composer.lock文件的作用
2016/02/03 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
Python实现数值积分方式
2019/11/20 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
html5适合移动应用开发的12大特性
2014/03/19 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
回门宴新郎答谢词
2014/01/12 职场文书
村委会贫困证明
2014/01/14 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
广告传媒专业应届生求职信
2014/03/01 职场文书
opencv检测动态物体的实现
2021/07/21 Python