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 相关文章推荐
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
Vue将页面导出为图片或者PDF
Aug 17 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
微信小程序文章详情功能完整实例
Jun 03 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
基于mysql的论坛(7)
2006/10/09 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
ext实现完整的登录代码
2008/08/08 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
js实现随机点名小功能
2017/08/17 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
简单了解Python中的几种函数
2017/11/03 Python
numpy数组拼接简单示例
2017/12/15 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
关于Keras Dense层整理
2020/05/21 Python
HTML5 新事件 小结
2009/07/16 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
《找不到快乐的波斯猫》教学反思
2014/02/24 职场文书
党性观念心得体会
2014/09/03 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
涨价通知
2015/04/23 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
《观潮》教学反思
2016/02/17 职场文书
安全责任协议书范本
2016/03/23 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
一行Python命令实现批量加水印
2022/04/07 Python