Show all images only after their complete load

Question

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 inside this id will load completely (Jquery).

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

@karim79: that's true, i've seen your answer, i've read the question too quickly — JMax, Sep 07 '11 at 09:41

score 21 · Accepted Answer · edited Feb 01 '14 at 21:44

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");
});

score 0 · Answer 2 · answered Sep 07 '11 at 09:14

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.

Show all images only after their complete load

2 Answers2

Linked