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

编辑：这是不正确的，我很困惑 load 事件在 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);
});

Answer 3

img标签中还有一个.load()函数，可以用来显示图片是否加载完毕。

所以我认为你可以使用 .load() 函数来启用/禁用 iframe 点击。

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