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填充，该<img从数据库中获取HTML代码段。其中一些代码是nvm ...所以理论上我无法改变它们

由于

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()

中计算要加载的图片和已加载的图片

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

2 个答案: