iFrame .load事件不等待预加载图像完成

Question

我建立了一个投资组合网站，其中包含一个iFrame来展示艺术品。 为了显示每个艺术品，将包含大图像的html页面加载到iFrame中。

iFrame在为空的情况下是隐藏的（显示：无），仅当内容完全加载后才逐渐消失。

//pass url of artwork page to iFrame
$("#creativeiframe").attr('src', thisLink.attr('href'));

//fade up iFrame once content loaded
$('#creativeiframe').load(function() {
        $('#creativeiframe').fadeIn(300);
});

我按预期的那样工作-仅在包括大图像的内容完全加载时才加载iFrame，但是缓慢加载促使我尝试预加载图稿图像，以便它们会在用户单击以将其加载到iFrame之前开始下载。

function preloadImage(url)
{
    var img=new Image();
    img.src=url;
}

现在，我遇到了一个问题-有时，当用户单击以加载图稿时，iFrame会淡出以显示一半加载的图像，或者更糟的是仅显示不加载图像的html内容。 我已经看过Chrome开发者工具网络检查器，并且当相关图片已开始预加载但尚未完成时，似乎会发生这种情况。

所以我的问题是：

a。）有人知道为什么会这样吗？ 是否是因为在更改iFrame src时通过预加载没有对图像的网络请求，因此.load事件不等待图像加载？

b。）有没有一种方法可以让iFrame .load事件等待“半张预载”图像完成加载后再触发？

期待中的感谢-轻松一点，我是JS的新手！

Answer 1

最后，通过在子HTML文档中运行脚本来检测图像负载，使此方法可以正常工作。 然后，这会触发父文档中的“淡入功能”，从而淡化包含的iFrame。

  <script type='text/javascript'>
    var img = new Image();
    img.onload = function(){
        window.parent.fadeFn();
    }
    <?php echo"img.src='".$fileNameVar."'"?> 
  </script>

Answer 2

编辑：这是不正确的，我很困惑 DOM完全加载时会触发load事件，但是其中不包括外部图像。

您应该可以通过ready（）事件执行您想要的操作：

//no reason to run the jQuery selector multiple times
var creativeIframe = $("#creativeiframe"); 

//fade up iFrame once content loaded
creativeIframe.ready(function() {
        creativeIframe.fadeIn(300);
});

Answer 3

img标签中还有一个.load（）函数，可用于显示图像是否已完全加载。

因此，我认为您可以使用.load（）函数启用/禁用iframe点击。

或者显示一个等待指标，也许更好。