如何在有很多图片的iframe页面中用js动态设置iframe的高度

在iframe的网页中用js动态设置iframe的高度不难，
如果iframe加载的网页中包含了很多的图片，
这些图片的加载会受到网速的影响，
会有很多延迟，
那该如何动态设置iframe的高度，
而不受这些图片的延时的影响呢？

下面给出示例函数：

var PWin = parent.window, PDoc = PWin.document;

var resetIframeHeight = function(sid) {

    if (PWin && PWin != window) {

        var d = PDoc.getElementById(sid);

        var dImgs = document.getElementsByTagName('img');

        if (d) {

            d.getElementsByTagName('iframe')[0].style.height = document.body.scrollHeight + 'px';

            for (var i=0;i<dImgs.length;i++) {

                dImgs[i].onload = function() {

                    d.getElementsByTagName('iframe')[0].style.height = document.body.scrollHeight + 'px';

                };

            }

        }

    }

};

其中resetIframeHeight()函数的参数sId是iframe外面的容器的id，
比如div，示例如下

<div id="sId">

  <iframe src="xxx.html"></iframe>

</div>

通过给每个img标签加上一个onload事件回调，
在图片加载完成的时候，
再去设置一下iframe的高度，
就能很好地解决图片加载延迟带来的iframe内网页高度不断发生变化的问题；

一切看起来就很自然了，
当加载完一个图片的时候，
iframe的网页高度就会自动增加，
一直到所有图片都加载完成。