$ (document) .ready () timeout for images

Question

When using jQuery, you wait until the DOM is ready before you start doing something. My problem is with the images.

Sometimes images take a long time to load, and quite often they are not. So I want ready () to have basically a timeout. It will wait for something like 5 seconds, and if these selected images are not loaded, it will launch this function.

Is it possible?

Answer 1

I think you might have come up with document.ready with window.onload

window.onload

, . , , ( -)

document.ready

, DOM. , . , , DOM , .

, 5 ,

:

<script>
    $(document).ready(function() {
        var imagesLoaded = false;
        var imagesTimer = setTimeout("alert('images failed to load')", 10000);

        $("img.checkme").load(function(){
            imagesLoaded = true;
            clearTimeout(imagesTimer);
            alert('images loaded within 10 seconds')
        });
    });
</script>

Answer 2

- : , .

. . , . - . - "", "load" 5 , , .

, , . .

- :

, , , "img" load.

, - :

// not tested, completely made up
$("img").load({ alert("foo"); });

Answer 3

jQuery, , , .

, ...

$('body').waitForImages(function() {
  // Images have loaded.
});