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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript加号"+"的二义性说明
Mar 04 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 Javascript
angular.bind使用心得
Oct 26 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 Javascript
vue实现虚拟列表功能的代码
Jul 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python 解析html之BeautifulSoup
2009/07/07 Python
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python中文乱码不着急,先看懂字节和字符
2017/12/20 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
财务管理专业推荐信
2013/11/19 职场文书
内容编辑个人求职信
2013/12/10 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
设计顾问服务计划书
2014/05/04 职场文书
访谈节目策划方案
2014/05/15 职场文书
社会公德演讲稿
2014/05/20 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
测量员岗位职责
2015/02/14 职场文书
民事代理词范文
2015/05/25 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
世界文化遗产导游词
2019/08/07 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS