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初学:find()方法及children方法的区别分析
Jan 31 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
程序员必知35个jQuery 代码片段
Nov 05 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 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
PHP 中文处理技巧
2010/04/25 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
koa-router源码学习小结
2018/09/07 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python设计实现的计算器功能完整实例
2017/08/18 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Django 视图层(view)的使用
2018/11/09 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
大学生两会精神学习心得体会
2014/03/10 职场文书
大学活动总结格式
2014/04/29 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL