2

I have a loading problem with external html and images. I want to load an external html (examplework.html) in a overlay-div, and when its totally loaded, i want to show it.

So the actual status is:

Jquery call on a Click-Event in the Main-HTML-Page:

$('#overlaycontent').load("examplework.html", function() {
    $('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
});

The examplework.html looks like this:

<div class="workdetail">
   <p>TEXT</p>
   <img class="extimgload" src="http://mydomain.de/works/1.jpg" alt="Description">
   <img class="extimgload" src="http://mydomain.de/works/2.jpg" alt="Description">
   <img class="extimgload" src="http://mydomain.de/works/3.jpg" alt="Description">
</div>

The Main Html-Page and the example.work are in the same folder. The src attributes of the images are absolute paths (because relative paths could cause problems, i`ve read in another discussion here)

Now the examplework.html is loaded and then displayed instead of a loading. That works fine. But the images are not yet loaded, so I see the 3 alt-descriptions and then they are replaced with the images, when each is ready loaded.

But I want to show the overlay, when everything is loaded. Is there a solution for this problem?

Thamilhan
  • 13,040
  • 5
  • 37
  • 59
Timo L
  • 21
  • 3

3 Answers3

2

Add a event load on your class. Please try: work fine for me

$('#overlaycontent').load("content.html", function() {
        $(".extimgload").on('load', function() {    
             $('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
        })
    });

UPDATE

$(document).ready(function() {
    count=0;
    $('#overlaycontent').load("content.html", function() {
        $(".extimgload").each(function() { 
            $(this).on('load', function() { 
                call();
            })
        })

    }); 
    function call(){
        count++;
        if (count == $(".extimgload").length)
            $('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
    }
});
P. Frank
  • 5,691
  • 6
  • 22
  • 50
  • Thts works fine with one Image, but i could have 3 or 10 or 20 images. So the callback has to be executed on the last element. – Timo L Oct 29 '15 at 13:34
0

this can work (based on this):

$('#overlaycontent').load("examplework.html", function() {
        $(".extimgload").load(function() {
          $('#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
        }).each(function() {
          if(this.complete) $(this).load();
        });
});

look at this fiddle

Community
  • 1
  • 1
Vanojx1
  • 5,574
  • 2
  • 23
  • 37
0

Now i have a dirty looking solution, based on P.Franks solution.

var count = 0;

$('#overlaycontent').load("examplework.html", function() {  
    $('.extimgload').each(function() {
        count ++;
    });

    $('.extimgload').on('load', function() {    
        showOverlay();
    });
});  

var showOverlay = function() { 
    count --;
    if (count == 0) {
        $'#overlaycontent').removeClass("loadingwork").addClass('loadedwork');
        $('#overlayshadow').removeClass("showloadi");
    }           
};
Timo L
  • 21
  • 3