急急急.....chrome对于js的for循环执行问题

div.innerHTML = '<img src="images/' + Math.ceil(Math.random() * 7) + '.jpg" width="300px" />';
//1、改为：
var img = document.createElement("img");
img.style.width="300px";
img.src="images/" + Math.ceil(Math.random() * 7) + ".jpg";
div.appendChild(img);
//2、或者移动到document.getElementById(shotCol).appendChild(div);之后

Quote: 引用 2 楼 showbo 的回复:

没测试代码，看不出什么效果，不过你的是for循环，ie和firefox应该也不可能看到1条加完等待一下在添加另外一条的效果吧，这个执行时间肉眼分辨不出来吧。要是你要哪种效果，可以用setTimeout延时来执行，不用for语句我是用js的单步调试来一步一步查看的，整个IE FF 下单步调试都是for循环一次，执行一次document.getElementById(shotCol).appendChild(div); ，但是chrome则是等所有的for循环完整的跑一次之后，才最终执行document.getElementById(shotCol).appendChild(div);

这位亲的办法也不OK。我现在声明下我找到的问题的地方是：在IE，FF下，单词循环的时候，会每次循环之内就执行document.getElementById(shotCol).appendChild(div); 这个符合所有的for循环标准。但是chrome则不同，chrome认为变量shotCol一直没有变化，所以会等整个for循环跑完之后才统一执行。其实不然，因为每次循环如果执行了document.getElementById(shotCol).appendChild(div); 的话，则每次计算到的shotCol都是不同的。

其实我要得效果就是每次计算三个id分别是cols1,cols2,cols3 的div的高度，如果哪个div的高度最短，则给它添加元素，就是为了实现瀑布流效果。原理：计算最短的那个列，然后给这儿列添加元素，然后继续for循环，每次for循环都找出当前最短的列，并添加子元素。IE ， FF 因为单次循环执行了最后的添加元素的操作，所以，每次for循环计算的结果都是正确的。但是chrome可能为了性能考虑，它发现最终都是执行document.getElementById(shotCol).appendChild(div); ，那么，它就认为不管循环多少次，就是执行的同一个结果，所以它会把前面for循环的结果缓存起来，等到for循环完全跑完之后，一次执行document.getElementById(shotCol).appendChild(div); ,这个是减轻了浏览器的渲染压力，但是却不是我们用js的for循环要达到的效果。这个肿么解决？

把函數內的變量聲明放到for外面

这位亲的办法也不OK。我现在声明下我找到的问题的地方是：在IE，FF下，单词循环的时候，会每次循环之内就执行document.getElementById(shotCol).appendChild(div); 这个符合所有的for循环标准。但是chrome则不同，chrome认为变量shotCol一直没有变化，所以会等整个for循环跑完之后才统一执行。其实不然，因为每次循环如果执行了document.getElementById(shotCol).appendChild(div); 的话，则每次计算到的shotCol都是不同的。
你确定是按照我说的这样改了？
我测试时候使用相同的一张图片作为地址，则第一次shotCol=cols1，第二次shotCol=cols2，这样难道不对？

这位亲的办法也试过了，chrome不OK，我想知道的是怎么解除chrome对于document.getElementById(shotCol).appendChild(div); 会整个for循环完了之后统一执行，而不是单次for循环之内就执行 document.getElementById(shotCol).appendChild(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 = "";
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 if(bthree - bone <= 0 && bthree - btwo <= 0)
{
shotCol = "cols3";
}
document.getElementById(shotCol).appendChild(div);
}
//window.onscroll = showPinterest;
},1000);

}
}

//检测是否到达浏览器底部，是返回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/4.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/2.jpg" width="300px" /></div>
                <div class="img_box"><img src="images/5.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/6.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>

这位亲的办法也不OK。我现在声明下我找到的问题的地方是：在IE，FF下，单词循环的时候，会每次循环之内就执行document.getElementById(shotCol).appendChild(div); 这个符合所有的for循环标准。但是chrome则不同，chrome认为变量shotCol一直没有变化，所以会等整个for循环跑完之后才统一执行。其实不然，因为每次循环如果执行了document.getElementById(shotCol).appendChild(div); 的话，则每次计算到的shotCol都是不同的。
你确定是按照我说的这样改了？
我测试时候使用相同的一张图片作为地址，则第一次shotCol=cols1，第二次shotCol=cols2，这样难道不对？这位亲的原理是什么呢？我试过了，你的办法chrome下，还是老样子，上面我贴出了我的全部代码，你可以拷贝到本地用chrome单步调试一下，看问题在哪？（我的源代码只需找1-7.jpg的图片放在images/目录下即可）

不明白LZ的问题在哪里.我用FF和Chrome测试过.看到的视觉效果就是在第二列和第三列下面各增加了一张图片

如果LZ的意思是lazyload方式进行添加的话,那在#2中showbo已经给出了办法呀

额，我的chrome是在一个长列下面直接添加了2张图片。我的是chrome最新版本，不知道你的是哪个版本？

如果LZ的意思是lazyload方式进行添加的话,那在#2中showbo已经给出了办法呀哇咔咔，没错，就是#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();

给你精简一下那个取对象的方法
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");

额那真实奇怪，我测试的时候也是你这个版本，我现在升级到了 31.0.1650.63 m，也还是这个问题
不过用#2提供的方法确实搞定了看来通用的办法就是setTimeout延迟对迪欧用然后再加载才OK

额那真实奇怪，我测试的时候也是你这个版本，我现在升级到了 31.0.1650.63 m，也还是这个问题
不过用#2提供的方法确实搞定了看来通用的办法就是setTimeout延迟对迪欧用然后再加载才OK
这个因为chrome是生成html后读图片后再设定高度所以循环的时候高度为0 settimeout的时候图片没读完估计还是0

额那真实奇怪，我测试的时候也是你这个版本，我现在升级到了 31.0.1650.63 m，也还是这个问题
不过用#2提供的方法确实搞定了看来通用的办法就是setTimeout延迟对迪欧用然后再加载才OK
这个因为chrome是生成html后读图片后再设定高度所以循环的时候高度为0 settimeout的时候图片没读完估计还是0
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();

如果LZ的意思是lazyload方式进行添加的话,那在#2中showbo已经给出了办法呀哇咔咔，没错，就是#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();
之前本人提供的方法的确是错误的，是因为后面测试时候加载图片没加上Math.random清除缓存。研究下后纠正下LZ的总结:
chrome没效果是因为for循环太快，你图片没加载完时候你的循环就可能已经结束了，所以肯定获取不到正确的高度。
但在ie下面你在把img加入dom后浏览器根据你的width自动默认先给你分配一个height（比如width=300时，分配height=321,width=600则height=643）,所以你下次循环能取到一个height。fiefox没测，估计也是这样的。根据这个结论2#的方法延迟500ms也并不能保证正确，因为图片加载时间很可能超过500ms，LZ你可以在chrome实验下图片加载时间比较长的情况。

看来，图片应该预先加载，
，进一步看，应该先写个预先加载random函数。

总结以上各位亲的经验，分享以下兼容各个浏览器的代码
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版本检测函数：
//检测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;
}
}那么，图片加载兼容性问题解决了，遗留的一个小问题就是貌似IE8及以下对 var img = new Image()支持有问题，所以在代码里我才加了IE版本号判断。这个问题不知道有哪位亲遇到过么？一会我继续写这次的问题总结。

IE6支持Image，再低版本就不知道了

关于原生js实现简单瀑布流的总结：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>

最后我要感谢下各位亲对于这个问题的热心回答：
感谢 showbo 、whatisma 、danica7773 、crying_boy 、MengYouXuanLv 、u011461314 等各位亲

恩确实是的我测试了下 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();

恩恩，但是如果是从数据库动态加载数据，并一条一条展示出来的话，在图片米有加载完成前是拿不到图片的高度数据的，所以只能等待img的onload之后才继续执行了。

我的意思是,如果是图片类的,你上传图片的时候可以取了它的高度存储起来.至于你说的只能等img的onload之后才能,倒是有不同的方法的再谈javascript图片预加载技术

恩你说的有道理，不过图片高度预存储到数据库的话就麻烦很多了，生成的图片都得记录高度，这个对于原来系统来说可是个不小的小改变，图片预加载技术我不是很了解，现在就去学习嘿嘿，谢谢你的提醒。 @crying_boy

http://bbs.csdn.net/topics/390690999求助，有木有Extjs大神搭救一下呢？在此谢过

恩你说的有道理，不过图片高度预存储到数据库的话就麻烦很多了，生成的图片都得记录高度，这个对于原来系统来说可是个不小的小改变，图片预加载技术我不是很了解，现在就去学习嘿嘿，谢谢你的提醒。 @crying_boy
你要想弄个实用点的建议你还是库里保存图片宽高或者继续完善加入异常处理，不管你settimeout还是onload都不可靠。
网络环境中出现某一张图片加载很慢或者完全加载不成功的情况都很正常，要是出现这情况你这样代码还影响下面一张图片的加载，更严重的要是第一张图片加载失败那整个功能全都失败了。

调试易

急急急.....chrome对于js的for循环执行问题

解决方案 »