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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
Aug 25 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
Javascript实现关闭广告效果
Jan 29 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP的博客ping服务代码
2012/02/04 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
20招让你的Python飞起来!
2016/09/27 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
建筑设计师岗位职责
2013/11/18 职场文书
岗位职责范本
2013/11/23 职场文书
《三峡》教学反思
2014/03/01 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
数学教师个人总结
2015/02/06 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS