在渲染之前加載所有AJAX內容（包括圖像）

Question

我正在處理需要自動加載內容並將其插入頁面開頭而不影響頁面垂直滾動位置的項目。插入內容，計算其高度，然後將其添加到頁面的滾動位置對我來說目前爲止已經奏效，但現在我遇到了如果存在圖像時無法獲得正確高度的問題（可能是因爲這些圖像天堂尚未裝入）。如何在將內容插入頁面之前加載圖像，以便在插入時計算正確的高度？還是有更好的方法去做這件事？

一些供參考（簡化）代碼：

 $.ajax({ 
      type: "POST", 
      url: post_url, 
      dataType: "json", 
      data: post_data, 
      success: function(data, stat, jqXHR) { 
       if (data.content.length) { 
        var updates = build_content(data.content); 
        $(updates).insertAfter("#" + id + " .reload_button"); 
        // Works if there's no external content 
        $("#" + id).scrollTop($("#" + id).scrollTop() + $(updates).height()); 
       } 
      } 
     }); 

更新：

(...) 
var updates = build_posts(data.response.posts).hide(); 
$(updates).insertAfter("#" + id + " .reload_button"); 
console.log("Waiting for DOM to load completely @ " + new Date().getTime()); 
updates.ready(function() { 
    console.log("Done @ " + new Date().getTime()); 
    $(updates).show(); 
    (...) 

這是我一直在使用.load（）等待直到完全加載的內容嘗試顯然加載了相同的毫秒，它插入了內容，這不可能是正確的，因爲它也必須加載圖像。我在這裏犯了一個明顯的錯誤嗎？

更新：使用.load而不是.ready只會導致回調函數永遠不會運行。該文件說，它是越野車，並可能不會被稱爲如果圖像緩存的瀏覽器，但我不知道這是否真的發生了什麼。

Answer 1

我最終用Alexander Dickson的waitForImages jQuery插件解決了這個問題。我不知道爲什麼.load（）拒絕工作，但到目前爲止，這個插件沒有問題，所以我堅持使用它。

Answer 2

你可以看看masonry-jquery插件有一個imageloaded函數來滿足你的需求。

Answer 3

您無法真正控制在頁面中加載項目的順序。當然，您可以先使用JavaScript加載圖像，然後將它們放入緩存中，但是在將其插入DOM之前，必須解析傳入的HTML以使其工作。

您可能想要嘗試渲染到隱藏的iframe，然後將內容從那裏複製到您的頁面中，然後在其中呈現。

Answer 4

如果這些圖像在初始標記中，那麼您應該能夠在load事件處理程序中運行您的代碼。只有加載了所有內容（包括圖像）後才能觸發load事件。

Answer 5

如果已知內容的最大高度，那麼您可以簡單地設置頁面的樣式，以允許它在某個位置加載內容而不會打擾頁面。

這是一個非常簡單的jsFiddle example，當您向下滾動頁面並單擊一個項目（任意事件）來「加載」頂部內容時，滾動位置不受影響。

Answer 6

除了成功和錯誤$ .ajax還有一個完整的處理程序，在完成ajax調用時執行代碼。 真的沒有一個與您的代碼相關的示例，我不確定這是您正在尋找的內容，還是您已經檢查過它，但是我想如果您在完整處理程序而不是成功處理程序，圖像應該已經加載並準備就緒。