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
}

在AJAX响应之后加载所有图像后显示div

1 个答案: