【原】js获取height为auto的高度问题
今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完。
当我把高度由 auto 设置为固定值之后,又可以获取到该img的高度。可是我就是不想要固定的高度啊。
于是,度娘之,得到的答案是
- var imgHeight=document.getElementById("img").offsetHeight;
- alert(imgHeight)
- //或者
- var imgHeight=document.getElementById("img").clientHeight;
- alert(imgHeight)
按照上面这个方法走,然而,并没有用。还是获取不到
于是,群上问了问,有人建议用
- $('img').load(function(){
- // 加载完成之后你要执行的函数
- });
用这种方法,你就可以在图片加载完成时获取到图片高度了。当然,这个方法只可以获取到一张图片的高度。如果你想全部加载完走一次,可以用下面的方法
- va imgNum=$('img').length;
- $('img').load(function(){
- if(!--imgNum){
- // 加载完成
- }
- });
- var t_img; // 定时器
- var isLoad = true; // 控制变量
- // 判断图片加载状况,加载完成后回调
- isImgLoad(function(){
- // 加载完成
- });
- // 判断图片加载的函数
- function isImgLoad(callback){
- // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
- // 查找所有封面图,迭代处理
- $('.cover').each(function(){
- // 找到为0就将isLoad设为false,并退出each
- if(this.height === 0){
- isLoad = false;
- return false;
- }
- });
- // 为true,没有发现为0的。加载完毕
- if(isLoad){
- clearTimeout(t_img); // 清除定时器
- // 回调函数
- callback();
- // 为false,因为找到了没有加载完成的图,将调用定时器递归
- }else{
- isLoad = true;
- t_img = setTimeout(function(){
- isImgLoad(callback); // 递归扫描
- },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
- }
- }
这样就完美解决了计算图片高度的问题。
此文参考网上的例子,网上还有很多类似的解决方法。大家可以去看看
【原】js获取height为auto的高度问题的更多相关文章
- js获取height和width总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...
- js获取浏览器当前窗口的高度长度
js获取浏览器可见区域(不包括标题栏.地址栏.收藏夹栏状态栏等额外区域,仅为页面呈现区域)的高度和宽度宽度:document.documentElement.clientWidth高度:documen ...
- js获取网页屏幕可视区域高度
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- js获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- [js]获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- js获取显示器、页面等高度 (转)
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- Js获取字符串的显示宽度/高度
重点:1.在H5页面,文字大小单位为rem2.不同的font-family,文字的宽度不一样3.文字宽度同时受font-size和font-family影响 思路:在页面动态创建一个节点,设置节点的f ...
- js获取页面及个元素高度、宽度
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
随机推荐
- android之拍照与摄像
拍照和摄像的意图很简答,这里直接贴代码 布局文件 <?xml version="1.0" encoding="utf-8"?> <Linear ...
- SpringMVC学习--文件上传
简介 文件上传是web开发中常见的需求之一,springMVC将文件上传进行了集成,可以方便快捷的进行开发. springmvc中对多部件类型解析 在 页面form中提交enctype="m ...
- Elasticsearch 权威指南
Elasticsearch 权威指南 http://fuxiaopang.gitbooks.io/learnelasticsearch/content/index.html
- Eclipse 中 安装 SVN 插件
方法一:使用Eclipse 安装向导安装 1.测试所指环境 Eclipse 4.5/Mars 2.svn 插件的官方网站: http://subclipse.tigris.org 3.打开eclip ...
- html-div自动撑大
下面提供几种解决方案,以修复该问题. 1.给父容器使用display属性 div#container { display: table; /* 建议使用 */ /*或者 display: table- ...
- Ehcache缓存配置
Cache的配置很灵活,官方提供的Cache配置方式有好几种.你可以通过声明配置.在xml中配置.在程序里配置或者调用构造方法时传入不同的参数. 你可以将Cache的配置从代码中剥离出来,也可以在使用 ...
- HTTP协议学习---(十)拓展-HTTPS协议
HTTPS(Hypertext Transfer Protocol over Secure Socket Layer,基于SSL的HTTP协议)使用了HTTP协议,但HTTPS使用不同于HTTP协议的 ...
- js 身份验证
var idCardNoUtil = { provinceAndCitys: {11:"北京",12:"天津",13:"河北",14 ...
- 【unity shaders】:Unity中的Shader及其基本框架
shader和Material的基本关系 Shader(着色器)实际上就是一小段程序,它负责将输入的Mesh(网格)以指定的方式和输入的贴图或者颜色等组合作用,然后输出.绘图单元可以依据这个输出来将图 ...
- Oracle触发器实例(网搜)
触发器使用教程和命名规范 目 录触发器使用教程和命名规范 11,触发器简介 12,触发器示例 23,触发器语法和功能 34,例一:行级触发器之一 45,例二:行级触发器之二 46,例三:INSTEA ...