Page fully loaded event

Question

I'm trying to run 2 functions that animate some images after the page is completely loaded (I'm using Jquery Circulate Plugin). I tried $(document).ready(function but the images are not showing at all on the first loading, they appear only after refreshing the page:

$( document ).ready(function() {

    $(".zenn").each(function() {
            $(this).circulate({
                speed: Math.floor(Math.random()*300) + 100,
                height: Math.floor(Math.random()*1000) - 470,
                width: Math.floor(Math.random()*1000) - 470
            });
        });

    $(".zenn").css("left", $(".zenn").position().left).circulate({
            loop: true,
            width: 0,
            height: 10
        });
    });

Link to the web page : http://ngit.ma/jgr/

I will be grateful for any help or suggestion since I'm new to Javascript. Thanks in advance.

Answer 1

Use load()

$(window).load(function()
  ...
})

$(document).ready doesn't wait for images. $(document).load does! :)

Answer 2

Answer is to use:

$(window).load(fn);

It will fire after all the resources including images are loaded.

$(window).load(function(){
   // do your logic here..  
});

$(document).ready(fn) is triggered as soon as the DOM is ready, but $(window).load(fn) will wait for all the resources to load before it is triggered.