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 自动完成脚本整理(33个)
Oct 20 Javascript
使用js写的一个简易的投票
Nov 27 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
微信小程序实现购物车功能
Nov 18 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 截取字符串专题集合
2010/08/19 PHP
php 启动报错如何解决
2014/01/17 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
javascript文本框内输入文字倒计数的方法
2015/02/24 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python功能键的读取方法
2015/05/28 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python3 XML 获取雅虎天气的实现方法
2018/02/01 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
俞敏洪一分钟演讲稿
2014/08/26 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
以权谋私检举信范文
2015/03/02 职场文书
小英雄雨来观后感
2015/06/09 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
理解python中装饰器的作用
2021/07/21 Python
python编程项目中线上问题排查与解决
2021/11/01 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js