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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JavaScript中for..in循环陷阱介绍
Nov 12 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
jquery实现拖动效果
Aug 10 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
May 14 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
javascript事件模型介绍
2016/05/31 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python 中的with关键字使用详解
2016/09/11 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
py-charm延长试用期限实例
2019/12/22 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
小学教师年度个人总结
2015/02/05 职场文书
贷款收入证明格式
2015/06/24 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang