javascript - Show div once all images are loaded following AJAX response -

Before starting on this, I really want to avoid using junkery because I will not go in, give me advice , As what I see is not.

I have a web page in development which sends many Ajax requests and in each HTML there is an external layer of internal layer and images. The issue with me is that the returned screen is appearing on the screen before the images have been aborted, giving me some seconds of broken images, which looks amateur.

Is there a way that someone knows (without ZQT), that I can programmatically inspect everything in an external divide (possibly using several reinforcements as embedded inner divis, etc.) And only shows the deal if all content rendering is finished?

  var fakeResponse =" & lt; div class = \ "external \" & gt; ; & Lt; div class = \ "inner \" & gt; & lt; img src = \ "http: //upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg \" / & Gt; & lt; / div & gt; & lt; / div & gt; ", Fake div = Document.createElement (" div "), // Here we will store feedback, so we can use .getXXX functions images ImagesReady = 0, i, length, callback = function () {// help us determine this Defense R & D ++ to show reaction when that is done loading all images and eliminate the preloading images; If (imagesReady == Length) {document.body.appendChild (fakeDiv.firstChild); }}; FakeDiv.innerHTML = Fake Response; // Browser allows to change replication in node nodes images = fake DW.GetElements biatagnam ("IMG"); Get all the included images for // (i = 0, length = images. Tall; i & lt; length; i ++) then // preload each image var img = new image (); Img.error = Callback; // Add Event Handlers to Determine the Status of Processing img.onload = callback; Img.src = Picture [i] .src; // actual loading init}