包含图像的div的scrollHeight值

Question

这是一个div，其中包含图片，最大高度为300px。 每当需要滚动条时（这里就是这种情况），我想在第一个div旁边添加第二个div（灰色的）。 我使用scrollHeight测试滚动条的存在。

<div class="container">
    <div class="pictures">
        <img src="test1.jpg" /> <img src="test2.jpg" /> <img src="test3.jpg" /> <img src="test4.jpg" />
        <img src="test5.jpg" /> <img src="test6.jpg" /> <img src="test7.jpg" /> <img src="test8.jpg" />
        <img src="test9.jpg" /> <img src="test10.jpg" /> <img src="test11.jpg" /> <img src="test12.jpg" />
        <img src="test13.jpg" /> <img src="test14.jpg" /> <img src="test15.jpg" /> <img src="test16.jpg" />
        <img src="test17.jpg" /> <img src="test18.jpg" /> <img src="test19.jpg" /> <img src="test20.jpg" />
        <img src="test21.jpg" /> <img src="test22.jpg" />
    </div>
    <div class="scroll"></div>
</div>

一些CSS：

div.container {
        width: 410px;
        max-height: 300px;
        overflow: auto;
    }
    div.container div.pictures {
        float: left;
        width: 390px;
    }
    div.container div.scroll {
        display: none;
        float: left;
        width: 30px;
        background-color: #eee;
    }

和JS：

$(function() {
    $(".scroll").each(function() {
        var iParentHeight = $(this).parent()[0].scrollHeight;
        if (iParentHeight > $(this).parent().css("max-height").replace(/[^-\d\.]/g, '')) {
            var iWidth = $(this).parent().width()+$(this).width();
            $(this).parent().css("width", iWidth);
            $(this).show();
            $(this).height(iParentHeight);
        }
    });
});

在Firefox上可以正常工作。 但是，在Chrome和Safari上存在一些问题：有时（实际上，大多数时候是Safari上的）在适当的时候不出现灰色的潜水。

我做了一些测试：没有图像，有X次相同的图像，有X次不同的图像。 仅当存在X个不同的图像时才出现此问题（也许是加载时间问题？）。

实际上，在Chrome和Safari上，scrollHeight的输出并不总是相同的。 对于FF，我总是得到相同的结果。

任何想法将不胜感激！

编辑：忘记了带有示例的链接： http : //toolboxebz.free.fr/test_scroll/test.html

Answer 1

我认为您应该将js函数包装在document.ready或利用诸如imageloaded之类的方法 ，正如您所说的，这种行为不是确定性的，这是由于在您的函数运行时，图像可能尚未完全加载到浏览器中。