在AJAX響應加載完所有圖像后顯示div

Question

在開始此操作之前，我真的想避免使用Jquery，原因是我不打算這樣做，所以請不要建議我這樣做，因為這不是我想要的。

我有一個正在開發中的網頁，它發送多個ajax請求，每個請求都返回一個html塊，其中包含一個包含內部div和圖像的外部div。 我遇到的問題是返回的html在其中的圖像完成渲染之前顯示在屏幕上，這給了我幾秒鍾的破碎圖像，看起來很業余。

有沒有人知道（沒有JQuery）的方法，我可以以編程方式檢查外部div中的所有內容（可能使用遞歸，因為有多個嵌入式內部div等），並且僅在所有內容都已完成渲染時才顯示div？

Answer 1

 var fakeResponse = "<div class=\\"outer\\"><div class=\\"inner\\"><img src=\\"http://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg\\" /></div></div>", fakeDiv = document.createElement("div"), // here we will store the response, so we can use the .getXXX functions images, imagesReady = 0, i, length, callback = function() { // this will help us to determine if all images have been loaded and to show the response if the preloading has finished imagesReady++; if (imagesReady == length) { document.body.appendChild(fakeDiv.firstChild); } }; fakeDiv.innerHTML = fakeResponse; // let the browser convert the response into dom nodes images = fakeDiv.getElementsByTagName("img"); // get all the included images for (i = 0, length = images.length; i < length; i++) { // then preload each picture var img = new Image(); img.onerror = callback; // add event handlers to determine the state of processing img.onload = callback; img.src = images[i].src; // init the actual loading }