特定 div 的突變觀察者

Question

我有大約一個大型 html 數據，大約 200k 數據以及子細節圖像等等。

當我嘗試設置我得到的 html 內容時遇到的問題，我遇到了瀏覽器卡住的問題。 所以我想做的是我正在編寫一個觀察者來檢查那個特定的 div，是否所有的 html 都已添加。 然后我需要禁用加載器，以便用戶可以使用

到目前為止我所嘗試的

var isHtmlAppending = true



function mutate(mutations) {
  mutations.forEach(function(mutation, index) {
    if(index === mutations.length - 1){
      isHtmlAppending = false
   }
  });
}


  var target = document.getElementById('container')
  var observer = new MutationObserver( mutate );
  var config = { characterData: true, attributes: false, childList: false, 
  subtree: true };

  observer.observe(target, config);



$.ajax({
  // call the api and get the html data
  success: (function(data){
     $("#container").html = data.renderedHtml
  })
})

如何使這個工作？，任何幫助表示贊賞

Answer 1

配置中的childList屬性必須設置為true才能找到添加的新元素。

以下是如何使用 MutationObserver 查找您要查找的元素的方法：

 var target = document.getElementById("target"); var numDivs = 0; var btn = document.getElementById("add-div"); btn.addEventListener("click", function() { var newDiv = document.createElement("div"); newDiv.id = "new-div-" + numDivs; newDiv.innerHtml = "New Div"; target.appendChild(newDiv); numDivs++; }); var mo = new MutationObserver(function(list, _o) { var numItems = list.length; for (var i = 0; i < numItems; i++) { var m = list[i]; if (m.type === "childList") { var node = m.addedNodes[0]; if (node.id == "new-div-0") { // Example target id console.log("I found the element I was looking for;"); } } } }). mo,observe(target: { childList; true });

 #target>div { background: #a33; margin: 2px 0; width: 30px; height: 30px; }

 <div id="target"> <button id="add-div">Add div</button> </div>