今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完。

当我把高度由 auto 设置为固定值之后,又可以获取到该img的高度。可是我就是不想要固定的高度啊。

于是,度娘之,得到的答案是

  1. var imgHeight=document.getElementById("img").offsetHeight;
  2. alert(imgHeight)
  3.  
  4. //或者
  5.  
  6. var imgHeight=document.getElementById("img").clientHeight;
  7. alert(imgHeight)

按照上面这个方法走,然而,并没有用。还是获取不到

于是,群上问了问,有人建议用

$(document).ready(function(){
  //你的代码
});

但是这个也没有用,因为jquery的ready只是dom的结构加载完毕,它便以为加载完成。(缺点是图片没有加载完毕,宽高为0,程序出错)
 
js的window.onload是指dom的生成和资源的加载,比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候,岂不阻止了其它js的正常执行);
 
经过不懈努力,找到了解决方法,那就是用图片加载完成事件
 
  1. $('img').load(function(){
  2. // 加载完成之后你要执行的函数
  3. });

用这种方法,你就可以在图片加载完成时获取到图片高度了。当然,这个方法只可以获取到一张图片的高度。如果你想全部加载完走一次,可以用下面的方法

  1. va imgNum=$('img').length;
  2.  
  3. $('img').load(function(){
  4.  
  5. if(!--imgNum){
  6. // 加载完成
  7. }
  8.  
  9. });

  

这样总可以了吧,我加载一张,就用图片总数去减一,减到0我就加载完毕。看起来很完美,前提是你没遇到IE。
 
IE的图片总是从缓存文件里去拿,这就造成load方法根本就不执行,只有是新图片才会走load。
 
服了吧?继续往下看。
 
---------------------------------------------------------------
 
或者是这样:
 
document.getElementById('img').onload=function(){
        // 加载完成 
};
 
 
看我原生代码一统天下,实际上效果甚微,一次只能处理一个你准备写多少个document,有人说我可以用循环去绑定,经过我测试貌似根本没效果。
 
还是一笑而过吧。看看我的最终解决方案(兼容:谷歌&火狐&IE)
 
-------------------------------------------------------------
 
利用图片没有加载完成的时候,宽高为0。我们很容易判断图片的一个加载情况。如下:
 
  1. var t_img; // 定时器
  2. var isLoad = true; // 控制变量
  3.  
  4. // 判断图片加载状况,加载完成后回调
  5. isImgLoad(function(){
  6. // 加载完成
  7. });
  8.  
  9. // 判断图片加载的函数
  10. function isImgLoad(callback){
  11. // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
  12. // 查找所有封面图,迭代处理
  13. $('.cover').each(function(){
  14. // 找到为0就将isLoad设为false,并退出each
  15. if(this.height === 0){
  16. isLoad = false;
  17. return false;
  18. }
  19. });
  20. // 为true,没有发现为0的。加载完毕
  21. if(isLoad){
  22. clearTimeout(t_img); // 清除定时器
  23. // 回调函数
  24. callback();
  25. // 为false,因为找到了没有加载完成的图,将调用定时器递归
  26. }else{
  27. isLoad = true;
  28. t_img = setTimeout(function(){
  29. isImgLoad(callback); // 递归扫描
  30. },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
  31. }
  32. }

 这样就完美解决了计算图片高度的问题。

此文参考网上的例子,网上还有很多类似的解决方法。大家可以去看看

 

【原】js获取height为auto的高度问题的更多相关文章

  1. js获取height和width总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  3. js获取浏览器当前窗口的高度长度

    js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...

  4. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  5. js获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  6. [js]获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  7. js获取显示器、页面等高度 (转)

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  8. Js获取字符串的显示宽度/高度

    重点:1.在H5页面,文字大小单位为rem2.不同的font-family,文字的宽度不一样3.文字宽度同时受font-size和font-family影响 思路:在页面动态创建一个节点,设置节点的f ...

  9. js获取页面及个元素高度、宽度

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

随机推荐

  1. android之拍照与摄像

    拍照和摄像的意图很简答,这里直接贴代码 布局文件 <?xml version="1.0" encoding="utf-8"?> <Linear ...

  2. SpringMVC学习--文件上传

    简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...

  3. Elasticsearch 权威指南

    Elasticsearch 权威指南 http://fuxiaopang.gitbooks.io/learnelasticsearch/content/index.html

  4. Eclipse 中 安装 SVN 插件

    方法一:使用Eclipse 安装向导安装 1.测试所指环境  Eclipse 4.5/Mars 2.svn 插件的官方网站: http://subclipse.tigris.org 3.打开eclip ...

  5. html-div自动撑大

    下面提供几种解决方案,以修复该问题. 1.给父容器使用display属性 div#container { display: table; /* 建议使用 */ /*或者 display: table- ...

  6. Ehcache缓存配置

    Cache的配置很灵活,官方提供的Cache配置方式有好几种.你可以通过声明配置.在xml中配置.在程序里配置或者调用构造方法时传入不同的参数. 你可以将Cache的配置从代码中剥离出来,也可以在使用 ...

  7. HTTP协议学习---(十)拓展-HTTPS协议

    HTTPS(Hypertext Transfer Protocol over Secure Socket Layer,基于SSL的HTTP协议)使用了HTTP协议,但HTTPS使用不同于HTTP协议的 ...

  8. js 身份验证

    var idCardNoUtil = {     provinceAndCitys: {11:"北京",12:"天津",13:"河北",14 ...

  9. 【unity shaders】:Unity中的Shader及其基本框架

    shader和Material的基本关系 Shader(着色器)实际上就是一小段程序,它负责将输入的Mesh(网格)以指定的方式和输入的贴图或者颜色等组合作用,然后输出.绘图单元可以依据这个输出来将图 ...

  10. Oracle触发器实例(网搜)

    触发器使用教程和命名规范 目  录触发器使用教程和命名规范 11,触发器简介 12,触发器示例 23,触发器语法和功能 34,例一:行级触发器之一 45,例二:行级触发器之二 46,例三:INSTEA ...