关于DIV自动高度问题

Question

大家好，第一次发帖多多指教。我的网页是用php开发的，有两个div，我也用了jquery写了一个
自动调高度的函数。每当页面刷新就自动调整我两个div的高度。就这样调用
$(document).ready(function() {   
    equalHeight("leftPanel","content");
});可是我的网页里的图片还没载完，我的div就自动调高度了，这导致我的div有时的自动高度变成不一样了。我就加了另一段 window.load 的代码，这样也解决了。
$(window).load(function(){   
    equalHeight("leftPanel","content");
});可是我有一些div里的内容是ajax返回来的，而且里面也有图片，当内容返回时，我也调用了equalHeight这个函数来调整高度。可是当div里的图片还没载完我的div就自动调整高度了，之后图片才载完，这样我的div就不一样高度了。而这个window.load的代码也不管用，因为ajax根本没刷新页面。那位大哥大姐帮帮忙，再线等 = =
谢谢
 

Answer 1

ajax不是有回调函数吗。。在回调函数里面调用equalHeight()

Answer 2

var img = new Image();
img.src = "你图片路径"；
$(img).load = function(){
   //图片加载成功后调用
   equalHeight("leftPanel","content");
}

Answer 3

谢谢你的回应！
axiheyhey,其实我不太会ajax,就是我的framework里用的。我的按钮启动后，ajax就自动返回内容了。liangws 的做法，请问如果我不要确定图片的路径，怎么办？ 我尝试直接用
$(img).load = function(){
equalHeight("leftPanel","content");
}
没有反应。我使用windows mouseover 时间启动就能，但是我觉得这样非常消耗资源是吗？
对不起我是新手多多包涵！

Answer 4

这样的话，加个定时器应该就可以了
$("xxx").html("包含图片的html代码");
setTimeout(function(){
    equalHeight("leftPanel","content");
},0)

Answer 5

对不起，请问你这段代码怎么用？为什么要加timeout？

Answer 6

setTimeout(function(){fn()},0)有个作用就是将里面的函数fn,push到线程的最末端执行，简单来说是等页面节点渲染完毕后执行fn()
在这里的用法就是等图片渲染完毕后执行

Answer 7

hi liangws,
你的代码能执行了，
但是当我的按钮启动了ａｊａｘ返回的内容里的图片加载在我的ｄｉｖ里时，
这段代码里的ｅｑｕａｌｈｅｉｇｈｔ就不执行了。
为什么会这样呢

Answer 8

不好意思，我是使用php framework的，我使用ajax只是在那个按钮上设置要onclick action执行方法是ajax，之后我就写我的php代码，执行时我的代码就以ajax返回到我的div，我不太清楚具体ajax的代码。请问如果我要确定一个div的内容真正载入完整后(我的按钮会改变div里的内容)，再执行我的equalheight，这样行吗？

Answer 9

你调用ajax后，是这样么？
$("你的div").html("ajax返回的html代码");
equalHeight("leftPanel","content");如果是这样，
equalHeight("leftPanel","content");
改成
setTimeout(function(){
   equalHeight("leftPanel","content");
},0)

Answer 10

我不清楚他是怎样返回html代码，但是我的framework里有一个函数是在每个页面载入之前执行的函数，我就在那个函数里执行 equalHeight("leftPanel","content"); 的。现在我在那个函数里如你所说改成
setTimeout(function(){
  equalHeight("leftPanel","content");
},0)
就成功了。怎么这么神奇，一句话解决了我多天的烦恼。
setTimeout 最后的0 代表什么？ 那不是秒吗？谢谢你

Answer 11

在请问一个菜鸟问题，
setTimeout(function(){
  equalHeight("leftPanel","content");
},0)和setTimeout(function(){
  equalHeight("leftPanel","content");
},0);和setTimeout(function(){
  equalHeight("leftPanel","content")
},0)
一样吗？哪个才标准？

Answer 12

看了半天。。setTimeout(function(){
  equalHeight("leftPanel","content");
},0);
都要加分号的，不加也可以，不过如果做JS文件压缩的时候不加的话会报错

Answer 13

这个要完全理解的话就要看JS与浏览器线程的东西了，
我简单说下为什么这样吧，
因为JS是单线程的，每个操作都会放到一个线程队列里面一个一个执行
看以下代码alert("1"); //T1
alert("2"); //T2
alert("3");  //T3
alert("4");  //T4
alert("5");  //T5这里线程的顺序是T1==>T2==>T3==>T4==>T5,所以打印出来必然是1,2,3,4,5但setTimeout的它会把里面的函数放到线程的最末端执行，如alert("1"); //T1
setTimeout(function(){
   alert("2")
},1000); //T2
alert("3");  //T3
alert("4");// T4
alert("5"); //T5setTimeout,无论毫秒数为多少都会会把T2线程放到队列的最末端，则T1==>T3==>T4==>T5==>T2，打印出来为1,3,4,5,2所以
setTimeout(function(){
  equalHeight("leftPanel","content");
},0);为什么会满足你的效果，是因为
setTimeout把  equalHeight("leftPanel","content");这个函数放到队列的最末端，就是全部JS方法执行完毕，节点渲染成功，图片下载完毕后执行

Answer 14

你好，经过了几百次的尝试，我发觉一个问题，
还是有那么小小的几率我的div不能平衡高度。尤其是当照片的src是来自网络时载入比较慢所以又不能挑高度。
但是使用了ｓｅｔｔｉｍｅｏｕｔ后，不能平衡高度的几率从４０％减少到５％我也不明白为什么会这样神奇的
怎么办啊

Answer 15

楼主 我提供另一条思路，看能不能实现：
在载入图片之前先取得图片的高度，
再根据图片的高度设置div的高度
这样就不需要等图片加载完才能确定div高度

Answer 16

你好，谢谢你的回复
我觉得不行，我的div的内容是未知数，不只是有图片，还包含其他div，也不能确定会出现多少图。由其他办法吗？settimeout可以从0改成2000 吗？

Answer 17

试试
$("xxx").html("包含图片的html代码").load(function(){
    equalHeight("leftPanel","content");
})

Answer 18

问题的根结在于 计算DIV高度时 div内的图片还没有加载 所以没有获取高度有很多办法 最简单的方案 div里面的图片直接设置高度和宽度

Answer 19

谢谢你的回复。
liangws,你的代码我尝试了还是不行。我尝试用了
$("img").load(function(){
equalHeight("leftPanel","content");
  alert('testing');
})全面刷新才有反应，如果是我的按钮启动ajax的图片加载就没反应，为什么会这样呢？

Answer 20

你好，请问什么意思？ 我不能确定div里会有多少图如何得到他的高度？
我的问题是这样，我有几个按钮，点击后我的div的内容就更改，内容是ajax返回的。
我用的是php framework所以我不了解他核心是怎么返回ajax内容，也不想更改它核心的文件。
现在如果返回的内容如有较多图，图片没载完我的equalheight就执行了

Answer 21

我写了这个函数解决了我的问题，
不知可以这样吗？
function checkImgLoaded(){ 
    var count = 0;
    var imgCount = $("div.panelArticle img").length;  
    var checked = false;
    $("div.panelArticle img").load(function(){
        count++;   
        if(count==imgCount){
            equalHeight("leftPanel","content");
        }
    })
}

Answer 22

对不起，varchecked=false 这行是没有的。怎么不能编辑自己的帖子？