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 中令人困惑的变量赋值
Aug 13 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
Jul 11 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue实现PC端分辨率适配操作
Aug 03 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程序中的常见漏洞进行攻击
2006/10/09 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
php导出excel格式数据问题
2014/03/11 PHP
php实现json编码的方法
2015/07/30 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
python 生成不重复的随机数的代码
2011/05/15 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Django框架 querySet功能解析
2019/09/04 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
大龄毕业生求职别忘职业规划
2014/03/11 职场文书
讲座主持词
2014/03/20 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
酒店员工培训方案
2014/06/02 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
二年级作文之动物作文
2019/11/13 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL