Show all images only after their complete load [duplicate]

This question already has answers here: Closed 11 years ago.

In

<div id="all-images">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <img src="images/5.jpg">
    <img src="images/6.jpg">
</div>

I want to show all Images of id="all-images" only when all the images i开发者_如何学Cnside this id will load completely (Jquery).

And before loading all images this section shows "Loading.." text

---

Assuming your div is pre-hidden:

$("#loadingDiv").show();
var nImages = $("#all-images").length;
var loadCounter = 0;
//binds onload event listner to images
$("#all-images img").on("load", function() {
    loadCounter++;
    if(nImages == loadCounter) {
        $(this).parent().show();
        $("#loadingDiv").hide();
    }
}).each(function() {

    // attempt to defeat cases where load event does not fire
    // on cached images
    if(this.complete) $(this).trigger("load");
});

---

http://api.jquery.com/load-event/

Try attaching a load event handler to your "all-images" div. If the API is to be trusted, that event will be triggered when all the subimages are loaded.

So I would have some sort of document.onready handler which will hide your images and insert the "Loading..." text, then your load event handler will show your images and remove the loading text.

Hope this helps.