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 相关文章推荐
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
Sep 05 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
vue实现拖拽进度条
Mar 01 Vue.js
用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
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
深入理解Promise.all
2018/08/08 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
Python中static相关知识小结
2018/01/02 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
详解Python打包分发工具setuptools
2019/08/05 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python爬取youtube视频的示例代码
2021/03/03 Python
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
教师实习自我鉴定
2013/12/13 职场文书
平安工地建设方案
2014/05/06 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
婚宴邀请函
2015/01/30 职场文书
共青团员自我评价
2015/03/10 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
pytorch 中nn.Dropout的使用说明
2021/05/20 Python