0

Before I start on this, I really want to avoid using Jquery for reasons I won't go into, so please don't advise me to, as that is not what I am looking for.

I have web page in development which sends multiple ajax requests off and each one returns a lump of html containing an outer div containing inner divs and images. The issue I have is the html returned is showing on the screen before the images within it are finished rendering, giving me a couple of seconds of broken images, which looks amateur.

Is there a way that anyone knows of (without JQuery), that I can programmatically inspect everything within the outer div (possibly using recursion as there are several embedded inner divs etc) and only show the div if all the contents have finished rendering?

Lord Nodral III
  • 71
  • 10
  • Essential points you must indicate: what device support (mobile/tablet/computer) do you need? What browser support do you need? – Adriano Oct 27 '14 at 12:08
  • I think I can help you. Could you give me the link that causes it? – jewelnguyen8 Oct 27 '14 at 12:14
  • related question: http://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-in-javascript – Adriano Oct 27 '14 at 12:16
  • This is to be in use across multiple platforms and be browser complaint for IE (9+), FF, Chrome, Safari. Unfortunately I can't give a link as it is in a purely dev state at the moment and using a local DB & server on my machine. – Lord Nodral III Oct 27 '14 at 12:21

1 Answers1

0

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
}
Andreas
  • 21,535
  • 7
  • 47
  • 56
  • Ok, that kind of makes sense to me. I assume I need to substitute the ajax returned HTML into the fakeresponse variable? Would I then replace document.body.appendChild(fakeDiv.firstChild); with my line which would show the div? – Lord Nodral III Oct 27 '14 at 12:57
  • In this example `fakeResponse` is just a placeholder for the actual AJAX response. The line with `document.body.appendChild(...)` would then have to be changed to what ever you're using to show the response in your site. So in short... yes :) – Andreas Oct 27 '14 at 14:39