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

iFrame .load event not waiting for preloading images to finish

本文关键字：加载 图像 等待 load 事件 iFrame      更新时间：2023-09-26

我建立了一个公文包网站，其中包含一个用于展示艺术品的iFrame。为了显示每个艺术品，将在iFrame中加载一个包含大图像的html页面。

iFrame在为空时隐藏（display:none），并且应该只有在内容完全加载时才会淡入。

//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开发工具网络检查器，当有问题的图像已经开始预加载，但还没有完成时，就会出现这种情况。

所以我的问题是：

  1. 有人知道为什么会发生这种事吗？是因为在预加载的情况下，当iFrame src发生更改时，没有对映像的网络请求，所以.load事件不会等待映像加载吗？

  2. 有没有一种方法可以让iFrame .load事件等待"半预加载"的图像在启动前完成加载？

我通过在子HTML文档中运行一个脚本来检测图像加载，最终实现了这一点。然后，这会触发父文档中的"淡入淡出功能"，淡入包含的iFrame。

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

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

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

或者显示等待指示器，也许更好。

EDIT：这是不正确的，我很困惑加载事件是在DOM完全加载时触发的，但不包括外部图像。

您应该能够使用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);
});
相关文章：