javascript 一个奇葩问题!不知道有木有人能帮忙分析一下能解决最好!

lazyDyvh 发布于 2014/03/14 16:45
阅读 295
收藏 0
<style type="text/css">
#caratact .caratact-locate{
 position: absolute;
 background: #000;
}
#caratact{
 width: 1000px;
 position: relative;
}
</style>
</head>
  
<body>
<div id="caratact">
 <div class="caratact-locate" ><img alt="" src="img/im1.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im2.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im3.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im4.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im4.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im2.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im3.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im1.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im3.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im3.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im2.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im4.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im4.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im2.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im1.jpg"></div>
 <div class="caratact-locate" ><img alt="" src="img/im3.jpg"></div>
</div>

js

$("#caratact .caratact-locate").each(function(){
	console.log($(this).height());
});

在控制台打印出来的时候火狐是正常的 谷歌是不正常的?为什么会出现这个情况

火狐控制台下 谷歌控制台下



加载中
1
Arrowing
Arrowing
图片载入后再获取高度
lazyDyvh
lazyDyvh
回复 @arrowing : 了解
Arrowing
Arrowing
回复 @lazyDyvh : 不用延迟加载啊,你可以判断是不是图片都加载完成了,比如你的容器里: var i = 0; var count = $('#container img').length; $('#container img').load(function(){ i++;//加载的图片数量 if(i == count){ //todo } });
lazyDyvh
lazyDyvh
回复 @arrowing : 那就是说我的JS 加个延迟启动就行了?
Arrowing
Arrowing
回复 @lazyDyvh : 如果有图片就等图片都载入完,没有的话,应该没关系吧
lazyDyvh
lazyDyvh
我里面的内容不一定是图片 有可能是文字,我想做一个瀑布流的效果 就差这个高度谷歌下不行 IE和火狐下都是正常高度
0
ththththht
ththththht
我也遇到过。谷歌浏览器和火狐浏览器很多时候不能获取高度,特别是谷歌。应该是谷歌与jquery的兼容问题。 可以试试$(this).css('height');
h
hasschi
css高度默認為auto,意指由子項目的高度來決定: 在img圖片載入前,高為0,寬為0,當載完圖片後瀏覽器便會設定img的寬高去撐開caratact-locate
ththththht
ththththht
回复 @lazyDyvh : 没有图片或图片没有载入的时候 css默认是0吧。试试onload。如果是文字,应该没问题的。 拿到的是实时的css
lazyDyvh
lazyDyvh
我还写了一个这个 console.log(this.offsetHeight); 这个的值也是同上面一样
lazyDyvh
lazyDyvh
我CSS里面没有写高度 你用.css是拿不到值的
0
老陌
老陌

引用来自“arrowing”的答案

图片载入后再获取高度
+1, 或者,你提前获取到图片高度,并设置 img 标签的 height 属性
lazyDyvh
lazyDyvh
延迟加载的话好像可以! 但是这样对网速慢的图片加载慢的估计延时就也会出现这个诡异问题吧
返回顶部
顶部