`

[转]获取动态加载的图片大小的正确方法

阅读更多

原文地址: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);
分享到:
评论

相关推荐

    JQ获取动态加载的图片大小的正确方法分享

    有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.jQuery load()事件处理的BUG, 当图片是从浏览器缓存...

    jQuery 判断图片是否加载完成方法汇总

    有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的jquery判断图片加载完成时的方法

    超实用的jQuery代码段

    7.8 获取图片原生尺寸的方法 7.9 检查图像是否已经被完全加载 7.10 单击改变背景图案 7.11 如何显示Flickr网站的图片 7.12 如何显示Google Picasaweb的图片 7.13 按比例调整图片的大小 7.14 滑动效果的背景图片 7.15...

    mobileAdapt:移动端加载h5页面适配

    由于移动端加载h5的时候获取的视口大小与完全渲染h5时获取的视口大小不一致,会导致swiper需要计算宽高问题不正确 解决方案: 通过onready、document.readyState="complete"都不奏效,采用计时器延缓计算swiper高度

    Cordova-Images-Injection:Ruby 脚本,可将默认图像注入您的项目,而无需加载它们。 如果像素不完美,将调整图片大小

    然后它运行在cordova 应用程序中找到的文件及其尺寸的“映射”,并按大小映射正确的图像通过在文件夹中复制到正确的命名约定来准备,然后复制 android/iphone 应用程序目录中的图像。 一个很好的附加好处是,如果...

    I2 Localization本地化.zip

    在一个位置编辑和预览所有翻译,然后在运行时仅加载当前语言。使用快速查找来访问它。 重复使用翻译 设置文本自动显示为大写,小写,上限,标题大小等。 在游戏动态翻译 Easy API在运行时翻译聊天消息和其他动态...

    delphi 开发经验技巧宝典源码

    0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...

    delphi 开发经验技巧宝典源码06

    0007 在Delphi中加载QReport报表组件 7 1.3 创建DLL文件 8 0008 生成一个DLL文件 8 0009 调用DLL文件 8 1.4 窗体相关操作 9 0010 将组件置前/置后 9 0011 如何锁定窗体中的组件 9 0012 如何改变窗体...

    JavaScript网页特效范例宝典源码

    实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 ...

    电子书格式转换工具 Epubor Ultimate Converter 3.0.12.529.zip

    修改元数据,为书籍带来完整性获取书籍但标题和作者姓名拼写不正确? 书的封面不是你喜欢的版本吗? 所有元数据问题都可以通过 Epubor Ultimate Converter 修复,就像软木塞一样。 按照您喜欢的方式修改元数据,使书籍...

    富头像上传编辑器演示

    v1.7:修复了当加载的原图url中带视图参数(__initParams)时,旋转值未正确初始化的错误; 优化了生成头像的速度。 发布时间:2014-01-03 v1.6:修复了后台只能获取upload_url(上传图片的接口)中首个参数的...

    精易模块[源码] V5.15

    11、新增“调用COM方法”COM编程,动态调用COM方法。 12、新增“时间_WMI时间转日期”把WMI数据时间转换成日期时间型,如“20140926001639.000000+480”。 13、修正“类_系统信息”重写该类,在部分系统下不兼容及...

    C#编程经验技巧宝典

    104 <br>0171 如何只允许输入指定图片格式 105 <br>0172 如何设置录入图片统一图片大小 105 <br>5.4 数组处理技巧 105 <br>0173 如何转换数组类型 105 <br>0174 如何复制数组中一系列元素的...

Global site tag (gtag.js) - Google Analytics