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动态导航插件dynamicNav用法实例分析

    jquery动态导航插件dynamicNav用法实例分析

    这篇文章主要介绍了jquery动态导航插件dynamicNav用法,较为详细的分析了jquery导航插件的原理及具体使用方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery 技巧小结

    jQuery 技巧小结

    jQuery 技巧,以前发布了很多了,具体的可以参考脚本之家以前发布的文章。
    2010-04-04
  • Jquery获取元素的父容器对象示例代码

    Jquery获取元素的父容器对象示例代码

    本篇文章主要是对Jquery获取元素的父容器对象的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery中使用each处理json数据

    jQuery中使用each处理json数据

    这篇文章主要介绍了jQuery中使用each处理json数据,非常简单实用,需要的朋友可以参考下
    2015-04-04
  • jCallout 轻松实现气泡提示功能

    jCallout 轻松实现气泡提示功能

    在提交表单前、焦点转移后或者 keyup 时往往需要对输入的文本就行检验,如果输入内容不符合相关约定则要进行提示或警告,有一个叫 jCallout 的插件可以轻松实现该功能,该插件基于 jQuery 使用,所以使用前需要添加引用 jQuery
    2013-09-09
  • jQuery数组处理函数整理

    jQuery数组处理函数整理

    下面小编就为大家带来一篇jQuery数组处理函数整理。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • Jquery弹出窗口插件 LeanModal的使用方法

    Jquery弹出窗口插件 LeanModal的使用方法

    开发网站少不了要经常用弹出窗口的形式,今天在网上搜了个小插件LeanModal,记录于此,方便自己,亦方便他人使用
    2012-03-03
  • 基于jquery的仿百度搜索框效果代码

    基于jquery的仿百度搜索框效果代码

    最近项目中用到类似百度的输入框,于是自己用jquery写了一个。希望和大家共同分享一下。存在许多bug,请各位不吝赐教。
    2011-04-04
  • jQuery编写widget的一些技巧分享

    jQuery编写widget的一些技巧分享

    在编写widget的时候,一般我们需要绑定一些事件,最好将这些widget的绑定事件加上当前widget的命名空间。
    2010-10-10
  • jquery 插件开发方法小结

    jquery 插件开发方法小结

    jquery 插件开发方法,需要的朋友可以参考下。
    2009-10-10

最新评论