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 getMonth()日期函数的值域是0-11
Feb 15 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 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
用Flash图形化数据(一)
2006/10/09 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python常用小技巧总结
2015/06/01 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python之信息加密题目详解
2019/06/26 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
python中列表的含义及用法
2020/05/26 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
4s店机修工岗位职责
2013/12/20 职场文书
学校岗位设置方案
2014/01/16 职场文书
小学评语大全
2014/04/22 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
世界环境日活动总结
2015/02/11 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
python中的3种定义类方法
2021/11/27 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android