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

 更新时间:2013年11月08日 17:00:44   转载 作者:  
这篇文章介绍了JQ获取动态加载的图片大小的正确方法,有需要的朋友可以参考一下

有一些很容易出错的获取动态加载的图片的尺寸的方法, 之所以出错, 主要原因是:
你在代码在图片从网页上下载完毕之前就调用了, 这种情况在本机开发时不太容易发现.
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中操控hidden、disable等无值属性的方法

    jQuery中操控hidden、disable等无值属性的方法

    在实现一些表单提交页面时会放置若干隐藏属性,下面为大家介绍下jQuery中如何操控hidden、disable等无值属性,感兴趣的朋友不要错过
    2014-01-01
  • jquery实现二级导航下拉菜单效果实例

    jquery实现二级导航下拉菜单效果实例

    这篇文章主要介绍了jquery二级导航下拉菜单,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • jquery下操作HTML控件的实现代码

    jquery下操作HTML控件的实现代码

    jquery 的操作HTML控件,需要的朋友可以参考下。
    2010-01-01
  • jquery中$each()方法的使用指南

    jquery中$each()方法的使用指南

    jQuery 中的each函数 很方便,$.each ()函数封装了十分强大的遍历功能,它可以遍历一维数组、多维数组、DOM , JSON 等等,在javaScript 开发过程中使用$each可以大大的减轻我们的工作量,这里贴一个简单的模仿each的函数,只能处理数组类型的对象。
    2015-04-04
  • jQuery、zepto、js常用小技巧

    jQuery、zepto、js常用小技巧

    本文给大家分享的是小编jQuery、zepto、js常用小技巧的心得,非常实用,有需要的小伙伴可以参考下
    2017-02-02
  • 实时监控input框,实现输入框与下拉框联动的实例

    实时监控input框,实现输入框与下拉框联动的实例

    下面小编就为大家分享一篇实时监控input框,实现输入框与下拉框联动的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JQueryEasyUI之DataGrid数据显示

    JQueryEasyUI之DataGrid数据显示

    在有的项目中,为了方便将数据库中的某些定值储存为指定的数字,怎么处理这种问题呢?下面小编通过一段代码给大家介绍下,需要的朋友参考下
    2016-11-11
  • jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题

    jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题

    本文主要介绍jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题,通过第三方的json2.js做到兼容,需要的朋友可以参考下。
    2016-05-05
  • 基于jquery tab切换(防止页面刷新)

    基于jquery tab切换(防止页面刷新)

    tab切换,是一个很常见的效果,今天在项目中遇到这样一个问题。就是切换后,页面刷新,又重新定位到第一个上了,很是郁闷
    2012-05-05
  • jQuery检查事件是否触发的方法

    jQuery检查事件是否触发的方法

    这篇文章主要介绍了jQuery检查事件是否触发的方法,涉及jQuery中trigger方法的使用技巧,需要的朋友可以参考下
    2015-06-06

最新评论