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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
Javascript中replace()小结
Sep 30 Javascript
浅谈JavaScript的自动垃圾收集机制
Dec 15 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
Convert Seconds To Hours
2007/06/16 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
checkbox:click事件触发span元素内容改变的方法
2017/09/11 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
对Python函数设计规范详解
2019/07/19 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
CSS3实战第一波 让我们尽情的圆角吧
2010/08/27 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
生物化工专业个人自荐信
2013/09/26 职场文书
银行批评与自我批评
2014/02/10 职场文书
应届生面试求职信
2014/07/02 职场文书
秋冬农业生产标语
2014/10/09 职场文书
研讨会致辞
2015/07/31 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL