javascript - 动态模式对话框完全加载后如何运行javascript

Question

我有一个模式对话框，当用户单击按钮时会打开该对话框。它必须是动态的。它有很多来自外部来源的图像，例如<img src="http://example.com/image.jpg"> 。打开此模式后，我想对加载的所有图像的高度求和。所以我打电话imageCalculation()在onShow

    <p:dialog 
        id="myDialog" 
        widgetVar="myDialogWV" 
        modal="true"  
        dynamic="true"
        onShow="imageCalculation(); ">

        <ui:include src="/somePage.xhtml"  />

    </p:dialog>

<script type="text/javascript">
    function imageCalculation(){
        var total = 0;
        $.each($('#form\\:myDialog').find('img'), function(k,v){
            total += v.naturalHeight;
        });
        alert(total);
    }
</script>

问题是目前imageCalculation()被调用，图像尚未从外部源加载，并且 naturalHeight仍然是 0。

有没有办法在所有对话框内容完全加载后运行 JavaScript？

编辑:来自somePage.xhtml的内容由 p:dataGrid 填充从 DB 获取 HTML 代码片段。其中一些代码是 <img ...所以理论上我无法改变它们

谢谢

Answer 1

我找到了一个可以帮助我的插件:waitForImages jQuery plugin

$('selector').waitForImages(function() {
    alert('All images are loaded.');
});