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

我已经构建了一个包含用于显示艺术品的iFrame的投资组合网站。要显示每个图稿，将包含大图像的html页面加载到iFrame中。iFrame .load事件不会等待预加载图像完成

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中。

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

现在我有一个问题 - 有时，当用户点击加载一个艺术品的iFrame会褪色起来呈现出半载图像，或者更糟的只显示了不加载图片的HTML内容。我查看了Chrome开发人员工具网络检查员，并且在问题图像已开始预加载但未完成时出现这种情况。

所以我的问题是：

一）有谁知道为什么发生这种情况？这是否是因为预加载在iFrame src发生更改时没有网络请求，因此.load事件不会等待映像加载？

b。）有没有一种方法可以让iFrame .load事件等待“半预装载”图像在发射前完成加载？

感谢预期 - 去轻松，我是一个JS新手！

来源

2013-12-15 Steve Brown

如果您的图片真的很大，我建议您使用** Progressive JPEG **进行预览。 –

谢谢伊戈尔，是的，我使用渐进JPEG，尽可能压缩等。 –

顺便说一句，有人知道我的问题为什么被拒绝吗？没有人要求澄清或完全回答它，所以假设它是相当明确的，而不是一个愚蠢的问题。我是新来这个论坛，所以想改善... –

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

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

来源

2014-01-08 12:02:22

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

你应该能够做你想做的与准备（）事件：

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

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

来源

2013-12-15 12:55:41

这不是相反吗？ http://api.jquery.com/ready/“在代码依赖于加载资源的情况下......应该将代码放置在加载事件的处理程序中。”还有。ready（）只能在与当前文档相匹配的jQuery对象上调用，而iFrame内容不是。 –

已经尝试过，但.ready（）永远不会触发 - 即使在加载图像时也是如此。好的，关于我多次调用jQuery选择器，谢谢。 –

你是对的，我把这两个混在一起。 –

也有在IMG标签的.load（）函数，它可以用来显示图像是否是否完全加载。

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

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

来源

2013-12-15 12:58:11 Sho

谢谢Sho - 你是否建议在子页面中运行一个脚本来检测图片是否被加载？任何想法如何才能触发父iFrame的淡入？ –

您可以显示iframe，并将display：none应用于其内容，在img加载时将其删除（/淡入） –

谢谢我将尝试将此作为解决方法，但它不是理想的，因为加载动画位于iFrame后面（将它放在iFrame中是没有意义的，因为有几个不同的HTML'模板'会被载入，所以这意味着所有这些都会重复）。我仍然很好奇，为什么预加载正在破坏以前的工作... –

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

回答

相关问题