js获取图片高度
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获取图片高度的更多相关文章
- 为什么js获取图片高度的值 都为0
尼玛 这个问题困扰我好久~ 看别人取值都是 img.width 我取到的总是0: 终于发现取图片尺寸的时候 图片还没有加载完毕.所以在 <img id ='sImg' class='thumbI ...
- JS Img对象获取图片高度宽度(兼容Chrome)
一般获取图片高度宽度的写法: var img = new Image();img.src = imgsrc;var imgWH = CalcImgTiple(img.width, img.height ...
- jquery的height()和javascript的height总结,js获取屏幕高度
jquery的height()和javascript的height总结,js获取屏幕高度 2014年9月18日 15048次浏览 引子 今天是九一八事变八十三周年,大家勿忘国耻!加油学习!经济和技术等 ...
- JS获取屏幕高度
主要使用了document对象关于窗口的一些属性,这些属性的主要功能和用法如下. 要 得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在netscape下需要使用w ...
- JS 获取星期几的四种写法
今天是星期几的4种JS代码写法,有需要的朋友可以参考一下 第一种写法 复制代码代码如下: var str = ""; var week = new Date().getDay() ...
- jquery easyui datagrid js获取记录数 页数 当前页
首先要吐槽的是 easyui竟然找不到未压缩的版本(1 也许它是藏在某个个几角旮旯; 2 压缩的版本想看懂? 大概你得在你脑袋上外接个CPU), 而且官方的文档简陋的不能再简陋了, 想实现个稍微复杂点 ...
- JS获当前网页元素高度offsetHeight
本文测试的是offsetHeight,获取网页中某元素的高度,单位是像素,获取的类型是整型,可以进行数字运算.如图,网页中的元素本身的高度包括,自身的内容+padding+border,而margin ...
- JS获取屏幕高度(转)
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- jquery 页面加载时获取图片高度
$(function () { $(window).load(function(){ alert($('img').height()); }); });
随机推荐
- duck type鸭子类型
在程序设计中,鸭子类型(英语:duck typing)是动态类型的一种风格.在这种风格中,一个对象有效的语义,不是由继承自特定的类或实现特定的接口,而是由当前方法和属性的集合决定.这个概念的名字来源于 ...
- 【HDOJ】1892 See you~
wa了十次,原来变量名写错.二维树状数组. #include <cstdio> #include <cstring> #define MAXN 1002 int nums[MA ...
- Linux Shell编程(24)——命令替换
命令替换 将会重新分配一个命令[1]甚至是多个命令的输出; 它会将命令的输出如实地添加到另一个上下文中. [2]使用命令替换的典型形式是使用后置引用(`...`). 后置引用形式的命令(就是被反引号括 ...
- 有关DOM的小总结
一直以为DOM(文档对象模型)是JS中最简单的一部分.不可否认,它确实很简单,因为DOM的思维模式有点固定,只需要简单地记住一些固定的方法,所以DOM可以说是所有js(这里指的是客户端的js)入门的起 ...
- Linux学习笔记30——套接字
一 什么是套接字 套接字是一种通信机制,凭借这种机制,客户/服务器系统的开发既可以在本地单机上进行,也可以跨网络进行. 二 套接字属性 套接字的特性由3个属性确定,它们是:域,类型和协议 1 套接 ...
- stringstream 与空格 (大家讨论一下代码结果的原因)
#include <iostream> // std::cout, std::endl #include <iomanip> // std::setw #include < ...
- Asterisk 安装与配置
如果用来管理 1.4 版本的 Asterisk ,可能会存在未知的问题.通过集成 CentOS . Asterisk 和 FreePBX , Fonality 公司提供了一个完全傻瓜式的 Asteri ...
- galera mysql 多主复制启动顺序及命令
Mysql 被复制机 sql启动
- spring中解析xml
解析xml有SAX,Stax,dom等方式,那么spring中是如何解析xml文件的呢? Document doc = this.documentLoader.loadDocument( inputS ...
- 黑马程序员_<<GUI(图形用户管理)-----2>>
--------------------ASP.Net+Android+IOS开发..Net培训.期待与您交流! -------------------- 8.对话框 对列出目录内容增加了对话框提示, ...