检查元素是否已加载答案

【问题标题】：Check if element is loaded检查元素是否已加载
【发布时间】：2017-12-30 03:51:58
【问题描述】：

我有一个站点和该站点中的 iFrame，以及许多其他内容（图像等）。

现在我使用 jQuery 的 $(document).ready(function() { ... }); 来执行代码。在该代码中，我试图操纵 iFrame 中的内容。但是，我必须确保加载 iFrame 以执行代码。

iFrame 通常在代码执行的同时加载，因此有时会失败，有时不会。

如果我使用$('#iframe').load(function(){ });，事件并不总是被执行，因为在那一刻我附加了那个加载监听器，iFrame 可能已经完成加载，加载事件不会再次被执行。如果我离开它，元素有时还不存在（代码执行得太早）。

所以我想要实现的是这样的：

if iFrame is already loaded
  -- execute code 
else 
  -- $('#iframe').load(function() { /*execute code*/ });

有没有更好的方法可以在不使用脏超时的情况下实现这一点？或者如果使用这种方法，是否有一个函数可以检查元素是否已经加载？

【问题讨论】：

更改为 .on('load') - .load() 和 .on('load') 做不同的事情
这可能会帮助你stackoverflow.com/questions/12267010/…
@ThisGuyHasTwoThumbs .load() 上的文档说“此方法是 .on( "load", handler ) 的快捷方式” - 它仍未在已加载的元素上执行
@FlorianMüller true 但是 - .load() 将加载 url 资源，可用于导入脚本并将数据加载到 div，.on('load') 可用于在元素的加载
@Shiladitya 感谢您的提示，但我想这与 Roamer-1888 回答的方法相同 - 在加载后设置 iFrame 的 src 元素，这会延长加载性能时间，

标签： jquery events dom loading

【解决方案1】：

确保在设置 iFrame 的 src 之前执行 $('#iframe').load(function(){ });。

要实现这一点，请从 javascript 中设置 src，而不是在 HTML 中。

此外，加载顺序在这里很重要。如果您的 jQuery 的整体包装器是 jQuery(window).load(function() {...})，则行为将与 jQuery(function() {...}) 给出的不同。

【讨论】：

这不是性能杀手吗？如果我必须等待 document.ready，并且只有在文档完成后才开始加载 iFrame？
不，至少不明显。

【解决方案2】：

对于同一个域 iframe（这里似乎是你的情况）：

您可以检查 iframe 是否有一些内容，然后使用以下逻辑触发加载事件：

$('#iframe').one('load', function(){
  console.log("Sure load event is called!")
}).each(function(){
  if(this.contentDocument.body.children.length) {
    $(this).trigger('load');
  }
})

也用于处理跨域 iframe：

我猜你最好的选择，如果你不需要支持 IE8，可能是捕获 load 事件并在你在 DOM 中设置 iframe 之前设置它，例如在 head 部分中调用它：

document.addEventListener(
    'load',
    function(event){
        var elm = event.target;
        if( elm.id === 'iframe'){ // or any other filtering condition
            console.log("Sure iframe is loaded!")
        }
    },
    true // Capture event
);

【讨论】：

第一个变体实际上是一个不错的方法，但包含在这两个语句之间加载内容的风险非常小。但是，它肯定会达成交易。在定义负载处理程序后设置 src 元素是一种粗暴的方式，但可以确保它正常工作。
@FlorianMüller 首先，我使用$.fn.one()，而不是$.fn.on()，目的是避免small risk that the content is loaded inbetween these two statements 的任何问题。所以无论发生什么，它只会被调用一次（每个匹配的元素在集合中，这里只有一个元素）。

【解决方案3】：

DOM 总是在页面完全加载之前准备好，在 .ready() 处理程序期间执行的代码中附加加载事件侦听器通常是不安全的。例如，可以使用 $.getScript() 等方法在页面加载很久之后动态加载脚本。虽然 .ready() 添加的处理程序将始终在动态加载的脚本中执行，但窗口的加载事件已经发生，这些侦听器将永远不会运行。

jQuery 提供了几种附加函数的方法，该函数将在 DOM 准备好时运行。以下所有语法都是等效的：

$(处理程序)
$(document).ready(handler)
$(“文档”).ready(处理程序)
$("img").ready(handler)
$().ready(处理程序)

load () documentation, read () documentation

【讨论】：