87,910
社区成员
发帖
与我相关
我的任务
分享急急急.....chrome对于js的for循环执行问题
我的问题是：原则上，for循环执行一次，最后这行代码就要立即执行：document.getElementById(shotCol).appendChild(div); IE 和 FF 都是正常的，在每次for循环的时候就立即执行了，但是chrome则不是，chrome是把整个for循环跑完之后（i从0-2），然后才统一执行document.getElementById(shotCol).appendChild(div); 这样导致结果就不一样，请问怎么调整？ 我要调整到同IE和FF的那种每次for循环的时候就执行的效果，而不是for循环整个都跑完了才统一执行。
for(var i=0; i<2; i++)
{
var bone,btwo,bthree,shotCol;
bone = document.getElementById("cols1").offsetHeight;
btwo = document.getElementById("cols2").offsetHeight;
bthree = document.getElementById("cols3").offsetHeight;
var div = document.createElement("div");
div.className = "img_box";
div.innerHTML = '<img src="images/'+Math.ceil(Math.random()*7)+'.jpg" width="300px" />';
if(bone - btwo <= 0 && bone - bthree <= 0)
{
shotCol = "cols1";
}
else if(btwo - bone <= 0 && btwo - bthree <= 0)
{
shotCol = "cols2";
}
else
{
shotCol = "cols3";
}
document.getElementById(shotCol).appendChild(div);
}
...全文
请发表友善的回复…
发表回复
b_what_u_wanna_b_8 2014-01-19
- 打赏
- 举报
恩恩 这个问题我发现了，嘿嘿谢谢你的建议。这几天忘了，今天来结贴嘿嘿
whatisma 2014-01-13
- 打赏
- 举报
恩 你说的有道理，不过图片高度预存储到数据库的话就麻烦很多了，生成的图片都得记录高度，这个对于原来系统来说可是个不小的小改变，图片预加载技术我不是很了解，现在就去学习嘿嘿，谢谢你的提醒。 @crying_boy 
[/quote]
你要想弄个实用点的建议你还是库里保存图片宽高或者继续完善加入异常处理，不管你settimeout还是onload都不可靠。
网络环境中出现某一张图片加载很慢或者完全加载不成功的情况都很正常，要是出现这情况你这样代码还影响下面一张图片的加载，更严重的要是第一张图片加载失败那整个功能全都失败了。
[/quote]
你要想弄个实用点的建议你还是库里保存图片宽高或者继续完善加入异常处理，不管你settimeout还是onload都不可靠。
网络环境中出现某一张图片加载很慢或者完全加载不成功的情况都很正常，要是出现这情况你这样代码还影响下面一张图片的加载，更严重的要是第一张图片加载失败那整个功能全都失败了。
「已注销」 2014-01-10
- 打赏
- 举报
http://bbs.csdn.net/topics/390690999求助，有木有Extjs大神搭救一下呢？在此谢过
b_what_u_wanna_b_8 2014-01-09
- 打赏
- 举报
恩 你说的有道理，不过图片高度预存储到数据库的话就麻烦很多了，生成的图片都得记录高度，这个对于原来系统来说可是个不小的小改变，图片预加载技术我不是很了解，现在就去学习嘿嘿，谢谢你的提醒。 @crying_boy
泡泡鱼_ 2014-01-08
- 打赏
- 举报
我的意思是,如果是图片类的,你上传图片的时候可以取了它的高度存储起来.至于你说的只能等img的onload之后才能,倒是有不同的方法的 再谈javascript图片预加载技术 b_what_u_wanna_b_8 2014-01-08
- 打赏
- 举报
恩恩，但是如果是从数据库动态加载数据，并一条一条展示出来的话，在图片米有加载完成前是拿不到图片的高度数据的，所以只能等待img的onload之后才继续执行了。
b_what_u_wanna_b_8 2014-01-08
- 打赏
- 举报
恩 确实是的 我测试了下 IE 9、8、7都OK的，那不晓得我的这段代码为什么在IE8及以下跑不了，IE9就OK，单步调试跟踪不到效果：
var myTimeOutI=0,img,forNum=8;
function appendImg()
{
img = new Image();
img.src = 'images/'+Math.ceil(Math.random()*7)+'.jpg';
img.style.width="300px";
img.style.height="auto";
img.onload = addElement;
}
function addElement()
{
var bone = document.getElementById("cols1").offsetHeight, btwo = document.getElementById("cols2").offsetHeight, bthree = document.getElementById("cols3").offsetHeight, colList = {}, _min = Math.min.apply(null,[bone,btwo,bthree]);
colList[bone] = "cols1";
colList[btwo] = "cols2";
colList[bthree] = "cols3";
var div = document.createElement("div");
div.className = "img_box";
div.appendChild(img);
var shotCol = colList[_min];
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
document.title += myTimeOutI;
if(myTimeOutI<forNum)
{
appendImg();
}
if(myTimeOutI>=forNum)
{
window.onscroll = showPinterest;
}
}
appendImg();泡泡鱼_ 2014-01-08
- 打赏
- 举报
具体的没测试过,如果真有你说的高度问题,那你加载的时候,指定图片的真实高度就好了呀,不就没你说的那些问题了
b_what_u_wanna_b_8 2014-01-08
- 打赏
- 举报
最后我要感谢下各位亲对于这个问题的热心回答：
感谢 showbo 、whatisma 、danica7773 、crying_boy 、MengYouXuanLv 、u011461314 等各位亲
b_what_u_wanna_b_8 2014-01-08
- 打赏
- 举报
关于原生js实现简单瀑布流的总结：
IE下：创建了div并且appendChild到父节点的时候，里面加载的图片在IE下的处理方式应该是等待图片加载完全出来之后这个appendChild动作才算执行完，所以不管是用哪个办法，IE下都是会先加载新的div，更新了页面布局，那么每次计算最短列的时候总会拿到正确的数据。
FF、chrome下则不同：chrome 比 FF 的预加载速度更快。但是处理机制一样，他们会先将创建的div加载到html文档中，并不等待新创建的div中的图片加载完成，就会继续执行下一个循环，那么这个时候，就会导致还没有将最短列的长度改变，就到了第二次循环，最短列长度计算出错；解决办法就是用img.onload方法，先加载img，只有等img完全加载完成之后，才去将新创建的div加到最短列上，这样最短列的长度及时得到了更新，最短列的计算也就不会出错了。
在这里我要感谢各位亲的热心回答，顺便贴出我的源代码，以供大家参考交流：
IE下：创建了div并且appendChild到父节点的时候，里面加载的图片在IE下的处理方式应该是等待图片加载完全出来之后这个appendChild动作才算执行完，所以不管是用哪个办法，IE下都是会先加载新的div，更新了页面布局，那么每次计算最短列的时候总会拿到正确的数据。
FF、chrome下则不同：chrome 比 FF 的预加载速度更快。但是处理机制一样，他们会先将创建的div加载到html文档中，并不等待新创建的div中的图片加载完成，就会继续执行下一个循环，那么这个时候，就会导致还没有将最短列的长度改变，就到了第二次循环，最短列长度计算出错；解决办法就是用img.onload方法，先加载img，只有等img完全加载完成之后，才去将新创建的div加到最短列上，这样最短列的长度及时得到了更新，最短列的计算也就不会出错了。
在这里我要感谢各位亲的热心回答，顺便贴出我的源代码，以供大家参考交流：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流测试</title>
<script>
window.onscroll = showPinterest;
function showPinterest()
{
if(reachBottom())
{
var waitingBox = document.getElementById("waitingBox");
waitingBox.innerHTML = '<img src="images/loading.gif" />';
//setTimeout用来模仿后台取数据
window.onscroll = "";
setTimeout(function(){
document.getElementById("waitingBox").innerHTML = "";
var IEnum = checkIeVersion()
var forNum = 8;
if( IEnum && IEnum <=8 )
{
//IE8一下用这个方法，包括IE8 这里因为IE8一下貌似对js的image对象支持有问题，导致加载出错
var myTimeOutI=0;
function addElement()
{
var bone = document.getElementById("cols1").offsetHeight, btwo = document.getElementById("cols2").offsetHeight, bthree = document.getElementById("cols3").offsetHeight, colList = {}, _min = Math.min.apply(null,[bone,btwo,bthree]);
colList[bone] = "cols1";
colList[btwo] = "cols2";
colList[bthree] = "cols3";
var div = document.createElement("div");
div.className = "img_box";
var shotCol = colList[_min];
div.innerHTML = '<img src="images/'+Math.ceil(Math.random()*7)+'.jpg" width="300px" style="height:auto;" />';
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
if(myTimeOutI<forNum)
{
setTimeout(addElement,50);
}
if(myTimeOutI>=forNum)
{
window.onscroll = showPinterest;
}
}
addElement();
}
else
{
//IE9以上或者FF chrome浏览器用这个方法
var myTimeOutI=0,img;
function appendImg()
{
img = new Image();
img.src = 'images/'+Math.ceil(Math.random()*7)+'.jpg';
img.style.width="300px";
img.style.height="auto";
img.onload = addElement;
}
function addElement()
{
var bone = document.getElementById("cols1").offsetHeight, btwo = document.getElementById("cols2").offsetHeight, bthree = document.getElementById("cols3").offsetHeight, colList = {}, _min = Math.min.apply(null,[bone,btwo,bthree]);
colList[bone] = "cols1";
colList[btwo] = "cols2";
colList[bthree] = "cols3";
var div = document.createElement("div");
div.className = "img_box";
div.appendChild(img);
var shotCol = colList[_min];
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
document.title += myTimeOutI;
if(myTimeOutI<forNum)
{
appendImg();
}
if(myTimeOutI>=forNum)
{
window.onscroll = showPinterest;
}
}
appendImg();
}
},1000);
}
}
//检测IE的版本并返回版本数字比如9/8/7,非IE返回false
function checkIeVersion()
{
if(window.ActiveXObject)
{
var vName = navigator.appVersion,vNum = parseInt(vName.split(';')[1].replace(/[a-z]+|[A-Z]+|\s+/ig,""));
return vNum;
}
else
{
return false;
}
}
//检测是否到达浏览器底部，是返回true，否返回false
function reachBottom()
{
var isBottom,sHeight,sTop,cHeight;
if(document.compatMode == "BackCompat")
{
//document.compatMode == "BackCompat" IE标准兼容模式关闭
sHeight = document.body.scrollHeight;
sTop = document.body.scrollTop;
cHeight = document.body.clientHeight;
}
else
{
//document.compateMode == "CSS1Compat" IE标准兼容模式开启，此时IE同FF，和chrome稍有不同
sHeight = document.documentElement.scrollHeight;
sTop = document.documentElement.scrollTop==0? document.body.scrollTop: document.documentElement.scrollTop;
cHeight = document.documentElement.clientHeight;
}
isBottom = sHeight - sTop - cHeight;
if(isBottom == 0)
{
return true;
}
else
{
return false;
}
}
</script>
<style>
.cols_left{width:300px;margin-right:30px;height:auto;overflow:auto;float:left;}
.cols_right{width:300px;height:auto;overflow:auto;float:left;}
.img_box{width:300px;height:auto;overflow:hidden;margin-bottom:15px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
</style>
</head>
<body>
<div style="width:960px;margin-left:auto;margin-right:auto;height:auto;overflow:auto;">
<div id="cols1" class="cols_left">
<div class="img_box"><img src="images/1.jpg" width="300px" /></div>
<div class="img_box"><img src="images/2.jpg" width="300px" /></div>
<div class="img_box"><img src="images/7.jpg" width="300px" /></div>
</div>
<div id="cols2" class="cols_left">
<div class="img_box"><img src="images/4.jpg" width="300px" /></div>
<div class="img_box"><img src="images/6.jpg" width="300px" /></div>
<div class="img_box"><img src="images/1.jpg" width="300px" /></div>
</div>
<div id="cols3" class="cols_right">
<div class="img_box"><img src="images/3.jpg" width="300px" /></div>
<div class="img_box"><img src="images/5.jpg" width="300px" /></div>
<div class="img_box"><img src="images/2.jpg" width="300px" /></div>
</div>
</div>
<div id="waitingBox" style="margin-left:auto;margin-right:auto;"></div>
</body>
</html>
Go 旅城通票 2014-01-08
- 打赏
- 举报
IE6支持Image，再低版本就不知道了
b_what_u_wanna_b_8 2014-01-08
- 打赏
- 举报
总结以上各位亲的经验，分享以下兼容各个浏览器的代码
var IEnum = checkIeVersion()
if( IEnum && IEnum <=8 )
{
//IE8一下用这个方法，包括IE8 这里因为IE8一下貌似对js的image对象支持有问题，导致加载出错
var myTimeOutI=0;
function addElement()
{
var bone,btwo,bthree,shotCol;
bone = document.getElementById("cols1").offsetHeight;
btwo = document.getElementById("cols2").offsetHeight;
bthree = document.getElementById("cols3").offsetHeight;
var div = document.createElement("div");
div.className = "img_box";
div.innerHTML = '<img src="http://www.sishoo.test/tmp/'+Math.ceil(Math.random()*2)+'.jpg" width="300px" />';
if(bone - btwo <= 0 && bone - bthree <= 0)
{
shotCol = "cols1";
}
else if(btwo - bone <= 0 && btwo - bthree <= 0)
{
shotCol = "cols2";
}
else if(bthree - bone <= 0 && bthree - btwo <= 0)
{
shotCol = "cols3";
}
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
if(myTimeOutI<2)
{
setTimeout(addElement,50);
}
if(myTimeOutI>=2)
{
window.onscroll = showPinterest;
}
}
addElement();
}
else
{
//IE9以上或者FF chrome浏览器用这个方法
var myTimeOutI=0,img;
function appendImg()
{
img = new Image();
img.src = 'http://www.sishoo.test/tmp/'+Math.ceil(Math.random()*2)+'.jpg';
img.style.width="300px";
img.style.height="auto";
img.onload = addElement;
}
function addElement()
{
var bone = document.getElementById("cols1").offsetHeight, btwo = document.getElementById("cols2").offsetHeight, bthree = document.getElementById("cols3").offsetHeight, colList = {}, _min = Math.min.apply(null,[bone,btwo,bthree]);
colList[bone] = "cols1";
colList[btwo] = "cols2";
colList[bthree] = "cols3";
var div = document.createElement("div");
div.className = "img_box";
div.appendChild(img);
var shotCol = colList[_min];
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
document.title += myTimeOutI;
if(myTimeOutI<2)
{
appendImg();
}
if(myTimeOutI>=2)
{
window.onscroll = showPinterest;
}
}
appendImg();
}//检测IE的版本并返回版本数字比如9/8/7,非IE返回false
function checkIeVersion()
{
if(window.ActiveXObject)
{
var vName = navigator.appVersion,vNum = parseInt(vName.split(';')[1].replace(/[a-z]+|[A-Z]+|\s+/ig,""));
return vNum;
}
else
{
return false;
}
}
zhjdg 2014-01-07
- 打赏
- 举报
看来，图片应该预先加载，
，进一步看，应该先写个预先加载random函数。
whatisma 2014-01-07
- 打赏
- 举报
如果LZ的意思是lazyload方式进行添加的话,那在#2中showbo已经给出了办法呀[/quote]
哇咔咔，没错，就是#2的办法解决了问题，用setTimeout来延迟执行，这样chrome就会正确加载了。这里我结贴之前总结一下：
1.for循环的时候，IE，和FF是实时更新了页面，所以能够正确算出各个列的offsetHeight;
2.chrome下，我猜测是 代码虽然改变了，但是页面没有被更新…一直到代码有一个较大时间的停顿的时候才会更新页面，所以会导致offsetHeight计算不正确；其实也可能是代码已经进去了…但是图片还没加载…所以拿到高度还是原来的高度…因为没加载图片，所以高度撑不起来…
3.所以解决办法就是用通用的延迟执行（延迟递归调用），这个时候不管是IE，FF 还是chrome都正确计算出了offsetHeight,也就能正确加载瀑布流了。给出我修复后的代码如下（只是替代for循环的那部分哈）：
//添加子元素
var myTimeOutI=0;
function addElement()
{
var bone,btwo,bthree,shotCol;
bone = document.getElementById("cols1").offsetHeight;
btwo = document.getElementById("cols2").offsetHeight;
bthree = document.getElementById("cols3").offsetHeight;
var div = document.createElement("div");
div.className = "img_box";
div.innerHTML = '<img src="images/'+Math.ceil(Math.random()*7)+'.jpg" width="300px" />';
if(bone - btwo <= 0 && bone - bthree <= 0)
{
shotCol = "cols1";
}
else if(btwo - bone <= 0 && btwo - bthree <= 0)
{
shotCol = "cols2";
}
else if(bthree - bone <= 0 && bthree - btwo <= 0)
{
shotCol = "cols3";
}
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
if(myTimeOutI<10)
{
setTimeout(addElement,50);
}
if(myTimeOutI>=10)
{
window.onscroll = showPinterest;
}
}
addElement();
allali 2014-01-07
- 打赏
- 举报
额 那真实奇怪，我测试的时候也是你这个版本，我现在升级到了 31.0.1650.63 m，也还是这个问题
不过用#2提供的方法确实搞定了看来通用的办法就是setTimeout延迟对迪欧用然后再加载才OK [/quote]
这个因为chrome是生成html后读图片后再设定高度 所以循环的时候高度为0 settimeout的时候图片没读完估计还是0[/quote]
var img;
var i = 0;
function appendDiv(){
var bone,btwo,bthree,shotCol;
bone = document.getElementById("cols1").offsetHeight;
btwo = document.getElementById("cols2").offsetHeight;
bthree = document.getElementById("cols3").offsetHeight;
var div = document.createElement("div");
div.appendChild(img);
if(bone - btwo <= 0 && bone - bthree <= 0)
{
shotCol = "cols1";
}
else if(btwo - bone <= 0 && btwo - bthree <= 0)
{
shotCol = "cols2";
}
else
{
shotCol = "cols3";
}
document.getElementById(shotCol).appendChild(div)
i++;
if(i<2){
appendImg();
}
}
function appendImg(){
img = new Image();
//img.src = 'images/'+Math.ceil(Math.random()*7)+'.jpg';
img.src = '1.jpg';
img.style.height = "300px";
img.onload = appendDiv
};
appendImg();
allali 2014-01-07
- 打赏
- 举报
额 那真实奇怪，我测试的时候也是你这个版本，我现在升级到了 31.0.1650.63 m，也还是这个问题
不过用#2提供的方法确实搞定了看来通用的办法就是setTimeout延迟对迪欧用然后再加载才OK [/quote]
这个因为chrome是生成html后读图片后再设定高度 所以循环的时候高度为0 settimeout的时候图片没读完估计还是0
b_what_u_wanna_b_8 2014-01-07
- 打赏
- 举报
额 那真实奇怪，我测试的时候也是你这个版本，我现在升级到了 31.0.1650.63 m，也还是这个问题
不过用#2提供的方法确实搞定了看来通用的办法就是setTimeout延迟对迪欧用然后再加载才OK
泡泡鱼_ 2014-01-07
- 打赏
- 举报
给你精简一下那个取对象的方法
var bone = document.getElementById("cols1").offsetHeight,
btwo = document.getElementById("cols2").offsetHeight,
bthree = document.getElementById("cols3").offsetHeight,
colList = {},
_min = Math.min.apply(null,[bone,btwo,bthree]);
colList[bone] = 'cols1';
colList[btwo] = 'cols2';
colList[bthree] = 'cols3';
var shotCol = colList[_min],
div = document.createElement("div");b_what_u_wanna_b_8 2014-01-07
- 打赏
- 举报
如果LZ的意思是lazyload方式进行添加的话,那在#2中showbo已经给出了办法呀[/quote]
哇咔咔，没错，就是#2的办法解决了问题，用setTimeout来延迟执行，这样chrome就会正确加载了。这里我结贴之前总结一下：
1.for循环的时候，IE，和FF是实时更新了页面，所以能够正确算出各个列的offsetHeight;
2.chrome下，我猜测是 代码虽然改变了，但是页面没有被更新…一直到代码有一个较大时间的停顿的时候才会更新页面，所以会导致offsetHeight计算不正确；其实也可能是代码已经进去了…但是图片还没加载…所以拿到高度还是原来的高度…因为没加载图片，所以高度撑不起来…
3.所以解决办法就是用通用的延迟执行（延迟递归调用），这个时候不管是IE，FF 还是chrome都正确计算出了offsetHeight,也就能正确加载瀑布流了。给出我修复后的代码如下（只是替代for循环的那部分哈）：
//添加子元素
var myTimeOutI=0;
function addElement()
{
var bone,btwo,bthree,shotCol;
bone = document.getElementById("cols1").offsetHeight;
btwo = document.getElementById("cols2").offsetHeight;
bthree = document.getElementById("cols3").offsetHeight;
var div = document.createElement("div");
div.className = "img_box";
div.innerHTML = '<img src="images/'+Math.ceil(Math.random()*7)+'.jpg" width="300px" />';
if(bone - btwo <= 0 && bone - bthree <= 0)
{
shotCol = "cols1";
}
else if(btwo - bone <= 0 && btwo - bthree <= 0)
{
shotCol = "cols2";
}
else if(bthree - bone <= 0 && bthree - btwo <= 0)
{
shotCol = "cols3";
}
document.getElementById(shotCol).appendChild(div);
myTimeOutI++;
if(myTimeOutI<10)
{
setTimeout(addElement,50);
}
if(myTimeOutI>=10)
{
window.onscroll = showPinterest;
}
}
addElement();泡泡鱼_ 2014-01-07
- 打赏
- 举报
版本 31.0.1650.57 m
加载更多回复（14）
