Example 1 - Callback when all images have loaded on entire page

With a selector of $('body'), the callback be invoked when all images have loaded on the entire page (i.e. within the 'body').
In this example, the callback will prepend red text in a yellow box at the top of the body.

Code

Show Code


<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.onImagesLoad.js"></script>
<script type="text/javascript">
    $(function(){
        //attach onImagesLoad to the entire body, invoked once when all images contained within $('body') have loaded
        $('body').onImagesLoad( function($selector){
        	//note: this == $selector, both of which will be $("body") in this example
            $selector.prepend('<div class="loaded">All images have loaded within selector $(&quot;' + this.selector + '&quot;)</div>');
        });
    });
</script>

Images