捕获一个部分元素在事件发生后已完成加载

Question

我有一个包含部分一个div：

<div class="Placeafterthis"> 
</div> 
... 
<div class="k-content"> 
<section class="rbs-section" id="id1" name=""> 
.. // section content 
</section> 
<section class="rbs-section" id="id2" name=""> 
.. // section content 
</section> 
<section class="rbs-section" id="id3" name=""> 
.. // section content 
</section> 
</div> 

现在基本上当DOM准备这些部分被加载。有什么方法可以检查特定部分何时完成加载？一旦完成加载，我需要克隆该部分，并将其放置在“Placeafterthis”div之后。有关我如何实现这一目标的任何建议？

Answer 1

您可以使用MutationObserver来检测节点何时添加到.k-content,clone他们使用jQuery和a PPEND他们.Placeafterthis后（demo）：

var kContent = $('.k-content'); // the original container in which the items will be placed 
var $Placeafterthis = $('.Placeafterthis'); // the cloned elements target marker placeholder 

function mutationHandler(mutation) { // the mutation handler will deal with the addition of new nodes to the original container 
    var addedNodes = mutation.addedNodes; 

    if (!addedNodes.length) { // if no added nodes return 
     return; 
    } 

    $.each(addedNodes, function() { // iterate the add nodes 
     var $element = $(this); 

     if (!$element.hasClass('rbs-section')) { // if the node doesn't have the right class continue to the next one 
      return true; 
     } 

     var $prevSections = $Placeafterthis.find('~ .rbs-section'); // find if there are already sections append to the target 
     var $target = $prevSections.length === 0 ? $Placeafterthis : $prevSections.last(); // if there are sections take the last, if not use the marker 

     /** note that using .clone(true) will also clone all jQuery event handlers and data from the original element. If you don't need this behavior, just use .clone() **/ 

     $target.after($element.clone(true)); // append after the target 
    }); 
} 

var observer = new MutationObserver(function (mutations) { // create a new mutation observer 
    mutations.forEach(mutationHandler); 
}); 

var config = { // config should include only childList because we just want added nodes 
    childList: true 
}; 

observer.observe(kContent.get(0), config); // watch the original container with the observer 

Answer 2

我从here得到了克隆代码，并根据需要进行了修改。在最后的script标签上使用async总是适用于我，但在外部脚本中使用它，我只是为了演示目的而使用它。最重要的是脚本在关闭的身体标记处，以避免阻塞。在DOMContentLoaded事件上附加一个事件监听器，这就是各个部分应该准备好的时间（除非部分中有iframe）。我将所有元素的边框着色以便于观看。

更新：在阅读guest271314的文章后，它提醒我忽略考虑克隆的ID。作为克隆人，他们也会有相同的ID，所以我重构了一下，并添加了一些星球大战。

section[id^="id"] { 
 
    border: 3px solid silver; 
 
    width: 200px; 
 
    height: 25px; 
 
} 
 
section[id^="st"] { 
 
    border: 3px solid black; 
 
    width: 200px; 
 
    height: 25px; 
 
} 
 
.kamino-content { 
 
    border: 3px dashed blue; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.Placeafterthis { 
 
    border: 3px dotted orange; 
 
    width: 200px; 
 
    height: 75px; 
 
}

<div class="Placeafterthis"> 
 
    Place After This 
 
</div> 
 

 
<div class="kamino-content"> 
 
    <section class="fett-dna" id="id1" name="jango"> 
 
    .. // section content 
 
    </section> 
 
    <section class="fett-dna" id="id2" name="jango"> 
 
    .. // section content 
 
    </section> 
 
    <section class="fett-dna" id="id3" name="jango"> 
 
    .. // section content 
 
    </section> 
 
    Kamino-Content 
 
</div> 
 

 

 

 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> 
 

 
<!-- You should really do this: <script async src="external.js"></script> --> 
 

 
<script async> 
 
    document.addEventListener("DOMContentLoaded", cloneLab, false); 
 

 
    function cloneLab() { 
 
    var vat = $('.kamino-content'), 
 
     squad = $('.fett-dna').size(), 
 
     fett = vat.find('.fett-dna'); 
 
    fett.each(function(idx, val) { 
 
     var trooper = $(this).clone(); 
 
     trooper.attr("id", "st" + (squad + idx)).attr("name", "stormtrooper"); 
 
     trooper.insertAfter('.Placeafterthis'); 
 
    }); 
 
    } 
 
</script>

Answer 3

尝试利用$.get()，追加响应于.k-content，在响应滤波所选section元件的id克隆，添加字符到id防止重复id的在DOM，.Placeafterthis后插入;定义getSections组与jQuery承诺对象this，递归调用getSections对sections阵列返回Array.prototype.shift()为每个项目在索引0为了回报$.get()，否则，如果在section[0]回报this.promise()

// `id`s of `section` elements to append to `.k-content` 
    var sections = ["#id1", "#id2", "#id3"]; 
    // selected `id` to do stuff with 
    var selected = sections[1]; 
    // container 
    var container = $(".k-content"); 
    // `complete` handler for `$.get()` requests 
    function selectedId(html, textStatus, jqxhr) { 
     // decode `data` : `id` sent with request 
     var id = decodeURIComponent(this.url.split("?")[1]).split("=")[1]; 
     // append `section` to `container` 
     container.append($(html).filter(id)); 
     // if `selected` appended to `container` , 
     // and `selected` is not in `DOM` directly after `.Placeafterthis` element 
     // clone `selected` , append after `.Placeafterthis` element 
     if (container.find(selected).is("*") 
      && !$(".Placeafterthis + " + selected + "-a").is("*")) { 
      var clone = $(selected, container).clone() 
         .attr("id", selected.slice(1) + "-a"); 
      $(".Placeafterthis").after(clone) 
     } 
    } 

    var getSections = function getSections() { 
     var p = sections.shift(); 
     return !!sections 
       && $.get("http://fiddle.jshell.net/guest271314/rvt8evoy/show/" 
       , {"id": p}, selectedId).then(getSections) 
    }; 

    getSections() 
    .then(function() { 
     console.log("complete") 
    }) 

的jsfiddle返回由!!运营商falsehttp://jsfiddle.net/1d6vmdpt/5/

Answer 4

如果你把你的脚本，最后一节之后：

<section class="rbs-section" id="id3" name=""> 
.. // section content 
</section> 

<script> 
    (function() { 
    var s3 = document.getElementById("id3"); 
    ... 
    })(); 
</script> 

那么这将是一个元素之后究竟调用，它的前辈会出现在DOM 。