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

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

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

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内容而不加载图像。我已经看过ChromeDevToolsNetworkInspector，当有问题的图像已经开始预加载，但尚未完成时，就会出现这种情况

因此，我的问题是：

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

b、 ）有没有办法让iFrame.load事件在启动之前等待“半预加载”映像完成加载

---

期待中的感谢-放轻松，我是JS的新手

编辑：这是不正确的，我不清楚加载事件是在DOM完全加载时触发的，但不包括外部图像

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

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

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

---

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

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

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

var img=新图像（）；
img.onload=函数（）{
window.parent.fadeFn（）；
}
如果你的图像真的很大，我建议你使用渐进式JPEG进行预览。谢谢Igor，是的，我正在使用渐进式JPEG，尽可能多地压缩。有人知道为什么我的问题被否决了吗？没有人要求澄清，也没有人完全回答，所以假设这是一个相当清楚的问题，而不是一个愚蠢的问题。我是新加入这个论坛的，所以我想改进一下……是的，我认为这是一个现实世界的问题+1不是反过来吗？“在代码依赖于加载的资产的情况下……应该将代码放在加载事件的处理程序中。”此外，只能在与当前文档匹配的jQuery对象上调用.ready（），而iFrame内容不是该对象。尽管如此，我还是尝试过，但是.ready（）似乎根本不会触发-即使在加载图像时也是如此。关于我多次调用jQuery选择器的观点很好，谢谢。谢谢-你是否建议在子html页面中运行脚本来检测图像是否已加载？你知道如何在父iFrame上触发fadeIn吗？你可以显示iFrame并对其内容应用显示：无，当img加载Hanks时将其删除（/淡入）。我将尝试将此作为解决方法，但这并不理想，因为加载动画在iFrame后面（将其放在iFrame中是没有意义的，因为有几个不同的HTML“模板”被加载，因此这意味着在所有这些中都要复制）。我仍然很好奇为什么预加载会破坏以前工作的东西…只是一个建议。你介意显示“加载”吗首先是指示器或预览图像，然后在img加载事件中用真实的img替换预览图像？预览img意味着大艺术品的小图像，如缩略图。另一个问题：我可以问一下，为什么要使用iFrame来显示图像？我想我们可以只使用一个div来保存所有艺术作品。因为我们需要更多的处理iFrame中的le DOM元素。您好，该网站确实使用缩略图，用户可以单击缩略图将艺术品加载到iFrame中。加载指示器当前位于iFrame后面，在iFrame淡入之前可见。我使用iFrame，因为艺术品是网页设计，并且该网站具有响应性-iFrame解决方案提供了一种简单的方式来加载也要让艺术品具有响应性，包括背景图像和滚动等。还有一些艺术品是SWF。该网站位于www.sjbdigital.co-可能会让事情更清楚！它还没有完成，所以代码有点混乱。。。