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 相关文章推荐
驱动事件的addEvent.js代码
Mar 27 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
jQuery zclip插件实现跨浏览器复制功能
Nov 02 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
JS中的const命令你真懂它吗
Mar 08 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 Session存储到Redis的方法
2013/11/04 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP学习记录之数组函数
2018/06/01 PHP
Prototype 学习 Prototype对象
2009/07/12 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
一份Java笔试题
2012/02/21 面试题
大学生工作推荐信范文
2013/12/02 职场文书
迟到检讨书900字
2014/01/14 职场文书
关于运动会的口号
2014/06/07 职场文书
扬尘污染防治方案
2014/06/15 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL