在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 }