动态模态对话框完全加载后如何运行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 的内容由从 DB 获取 HTML 代码片段的 p:dataGrid 填充。其中一些代码是<img...所以理论上我无法更改它们

谢谢

Answer 1

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

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

Answer 2

我不确定，但您可以尝试为所有图片添加onload 属性。
像这样：

<script>
function loadHandler(x) {
     console.log(x+" element loaded!");
}
</script>
<img src="img1.png" onload="loadHandler('1 image')">
<img src="img2.png" onload="loadHandler('2 image')">
//etc...

然后就可以统计loadHandler()中的加载图片和已经加载的图片了