js获取图片高度时经常会获取的图片高度为0,原因是图片未加载完毕。第一次加载时,显示0(火狐等部分浏览器显示24)。待加载完毕后,再刷新,显示图片高度258。

var oImg = document.createElement("img");
oImg.src = "http:////www.baidu.com/img/bdlogo.png";
document.getElementsByTagName("body")[0].appendChild(oImg);
console.log(oImg.height);

  onload可以避免这种问题。

oImg.onload = function(){
console.log(this.height);
};

  jquery有类似方法。

$(oImg).load(function(){
console.log($(this).height());
});

  浏览器加载图片只加载一次,第二次则读取缓存。onload事件只在第一次加载过程中触发。如果我们无论图片是否存在缓存中都在图片加载完毕后执行某语句,则可利用img的complete属性。complete为true时,表示图片存在于缓存中。

if(oImg.complete){
  console.log(oImg.height);
}else{
  oImg.onload = function(){
  console.log(this.height);
  };
}

js获取图片高度的更多相关文章

  1. 为什么js获取图片高度的值 都为0

    尼玛 这个问题困扰我好久~ 看别人取值都是 img.width 我取到的总是0: 终于发现取图片尺寸的时候 图片还没有加载完毕.所以在 <img id ='sImg' class='thumbI ...

  2. JS Img对象获取图片高度宽度(兼容Chrome)

    一般获取图片高度宽度的写法: var img = new Image();img.src = imgsrc;var imgWH = CalcImgTiple(img.width, img.height ...

  3. jquery的height()和javascript的height总结,js获取屏幕高度

    jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...

  4. JS获取屏幕高度

    主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下. 要 得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在netscape下需要使用w ...

  5. JS 获取星期几的四种写法

    今天是星期几的4种JS代码写法,有需要的朋友可以参考一下 第一种写法 复制代码代码如下: var str = "";  var week = new Date().getDay() ...

  6. jquery easyui datagrid js获取记录数 页数 当前页

    首先要吐槽的是 easyui竟然找不到未压缩的版本(1 也许它是藏在某个个几角旮旯; 2 压缩的版本想看懂? 大概你得在你脑袋上外接个CPU), 而且官方的文档简陋的不能再简陋了, 想实现个稍微复杂点 ...

  7. JS获当前网页元素高度offsetHeight

    本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...

  8. JS获取屏幕高度(转)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  9. jquery 页面加载时获取图片高度

    $(function () { $(window).load(function(){ alert($('img').height()); }); });

随机推荐

  1. BZOJ 2754: [SCOI2012]喵星球上的点名

    2754: [SCOI2012]喵星球上的点名 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 649  Solved: 305[Submit][Sta ...

  2. 完美解决 Phonegap jQeuryMobile 闪屏 问题

    在切换page或者弹出dialog时,会出现闪屏情况,综合网络上各种方法,得出以下方法可完美解决: 1.首先界面页面切换闪屏: 在加载jQuery后,加载jQuery Mobiel之前,插入js语句进 ...

  3. 提升 DevOps 效率,试试 ChatOps 吧!

    本文翻译自文章 To Boost DevOps, Try ChatOps,文中用简单易懂的方式介绍了 ChatOps 的发展和价值,由 OneAPM 工程师编译整理. 当我们谈论 DevOps 时,总 ...

  4. SQL Server ->> 深入探讨SQL Server 2016新特性之 --- Temporal Table(历史表)

    原文:SQL Server ->> 深入探讨SQL Server 2016新特性之 --- Temporal Table(历史表) 作为SQL Server 2016(CTP3.x)的另一 ...

  5. 14.5.5.1 An InnoDB Deadlock Example 一个InnoDB 死锁实例

    14.5.5.1 An InnoDB Deadlock Example 一个InnoDB 死锁实例 下面的例子演示了一个错误可以发生当一个lock 请求会导致一个死锁,例子设计2个客户端,A和B: J ...

  6. TCP/IP FTP/TFTP

    引言 从一台计算机向另一台计算机传送文件是在连网或互联网环境中最常见的任务.而FTP和TFTP就是这样的协议. 关于文件传输协议FTP? 端口21使用服务TCP [FTP模型] FTP连接? 1.控制 ...

  7. 【转】android: 长按删除listview的item

    原文网址:http://www.cnblogs.com/nuistlr/archive/2012/09/07/2675649.html 首先要继承OnItemLongClickListener pub ...

  8. 关于cocos2d和cocos2dx,还有iOS上的cocos2d的ARC问题

    好吧,我承认这个我花了N个小时所做的努力都白费了. 事情的开始是这样的,今天在写cocos2dx的时候,测试发现总是出现溢出的问题,总是在main.m的autorelease报错.(好吧,如果我以后发 ...

  9. Matlab编程-图形处理功能

    绘图功能最基本的命令行:plot(y). 二维图形: (1) >> y=rand(100,1); >> plot(y) y是随机的实向量,以生成y的索引为横坐标,y为纵坐标绘图 ...

  10. nginx简单双机热备:backup参数的使用

    nginx简单双机热备:backup参数的使用 nginx简单双机热备:backup参数的使用