原文地址:http://www.ideawu.net/blog/2011/07/%E8%8E%B7%E5%8F%96%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E7%9A%84%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F%E7%9A%84%E6%AD%A3%E7%A1%AE%E6%96%B9%E6%B3%95.html
有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
- 你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
- 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);
分享到:
相关推荐
有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.jQuery load()事件处理的BUG, 当图片是从浏览器缓存...
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的jquery判断图片加载完成时的方法
7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15...
由于移动端加载h5的时候获取的视口大小与完全渲染h5时获取的视口大小不一致,会导致swiper需要计算宽高问题不正确 解决方案: 通过onready、document.readyState="complete"都不奏效,采用计时器延缓计算swiper高度
然后它运行在cordova 应用程序中找到的文件及其尺寸的“映射”,并按大小映射正确的图像通过在文件夹中复制到正确的命名约定来准备,然后复制 android/iphone 应用程序目录中的图像。 一个很好的附加好处是,如果...
在一个位置编辑和预览所有翻译,然后在运行时仅加载当前语言。使用快速查找来访问它。 重复使用翻译 设置文本自动显示为大写,小写,上限,标题大小等。 在游戏动态翻译 Easy API在运行时翻译聊天消息和其他动态...
0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...
0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...
实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 ...
修改元数据,为书籍带来完整性获取书籍但标题和作者姓名拼写不正确? 书的封面不是你喜欢的版本吗? 所有元数据问题都可以通过 Epubor Ultimate Converter 修复,就像软木塞一样。 按照您喜欢的方式修改元数据,使书籍...
v1.7:修复了当加载的原图url中带视图参数(__initParams)时,旋转值未正确初始化的错误; 优化了生成头像的速度。 发布时间:2014-01-03 v1.6:修复了后台只能获取upload_url(上传图片的接口)中首个参数的...
11、新增“调用COM方法”COM编程,动态调用COM方法。 12、新增“时间_WMI时间转日期”把WMI数据时间转换成日期时间型,如“20140926001639.000000+480”。 13、修正“类_系统信息”重写该类,在部分系统下不兼容及...
104 <br>0171 如何只允许输入指定图片格式 105 <br>0172 如何设置录入图片统一图片大小 105 <br>5.4 数组处理技巧 105 <br>0173 如何转换数组类型 105 <br>0174 如何复制数组中一系列元素的...