等待所有的DOM操作完成與jQuery嗎？

Question

我對如何完成某項工作有一些困惑。 我正在使用稱為同位素的插件編寫具有砌體布局的作品集。 基本上是pinterest樣式布局。 我還將擁有一些過濾器，這些過濾器將自動從數據庫中獲取正確的內容，並將其插入到小胡子模板中。 現在的問題是，在運行同位素中繼輸出功能之前，如何等待所有dom插入完成。 因為如果我運行得太早，這些元素將無法正確定位。 我不想執行setTimeout（）函數，因為我不確定數據庫請求將花費多長時間，並且我不想讓用戶等待太久。

有什么建議么？

Answer 1

查看jQuery Deferred.done（）

這是該站點的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

 <button>Go</button>
 <p>Ready...</p>

<script>
/* 3 functions to call when the Deferred object is resolved */
function fn1() {
  $("p").append(" 1 ");
}
function fn2() {
  $("p").append(" 2 ");
}
function fn3(n) {
  $("p").append(n + " 3 " + n);
}

/* create a deferred object */
var dfd = $.Deferred();

/* add handlers to be called when dfd is resolved */
dfd
/* .done() can take any number of functions or arrays of functions */
.done( [fn1, fn2], fn3, [fn2, fn1] )
/* we can chain done methods, too */
.done(function(n) {
  $("p").append(n + " we're done.");
});

/* resolve the Deferred object when the button is clicked */
$("button").bind("click", function() {
  dfd.resolve("and");
});
</script>

</body>
</html>

網站上也有一個演示。

Answer 2

您可以在insert函數的回調中調用relayOut方法。

$('#container').isotope( 'insert', /*items*/ ,function(){
  $('#container').isotope( 'reLayout', callback );
} );

或者您可以將所有方法作為鏈條給出

$('#container').isotope( 'insert', /*items*/).isotope( 'reLayout', callback );

如果您正在使用ajax調用內容，則可以在jquery ajax的成功回調的最后一行上調用relayOut。 因此，在調用relayOut方法之前，每個DOM操作都已完成。

有關同位素插件的回調和鏈接方法，請參考http://isotope.metafizzy.co/docs/methods.html 。 對於jquery ajax，請訪問http://api.jquery.com/jQuery.ajax/

Answer 3

您當前是否在$（document）.ready（function（）內部運行該函數？也許您可以在$（window）.load（function（）內部嘗試該函數。

等待所有的DOM操作完成與jQuery嗎？

問題描述

3 個解決方案

解決方案1
0 2012-12-17 01:23:10

解決方案2
0 已采納 2012-12-17 01:32:10

解決方案3
-3 2012-12-17 01:17:10

等待所有的DOM操作完成與jQuery嗎？

問題描述

3 個解決方案

解決方案1 0 2012-12-17 01:23:10

解決方案2 0 已采納 2012-12-17 01:32:10

解決方案3 -3 2012-12-17 01:17:10

解決方案1
0 2012-12-17 01:23:10

解決方案2
0 已采納 2012-12-17 01:32:10

解決方案3
-3 2012-12-17 01:17:10