包含图像的 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 个不同的图像时才会出现此问题（可能是加载时间问题？）。

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

任何想法将不胜感激！

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

Answer 1

我认为你应该将你的 js 函数包装在 document.ready 中或使用类似 imageloaded 的东西，正如你所说的行为不是确定性的，这是因为当你的函数运行时，图像可能还没有完全加载到浏览器中。