Preloading with $(window).load() issue

Question

I am using the following approach to Preload the content of my website:

$(window).load(function(){
    $('#preLoader').hide();
    $('#container').show();
});

Now my #container div contains all my website content. I don't want this to be shown until my body background image has completely loaded...So while the background image is loaded, the #preLoader div displays with an animated loader gif inside.

The issue:

There are some elements that do not always load (eg gravatars) due to the Server containing the resource not being available...so the $(window).load() function never executes since the page has not finished loading - it it stuck at trying to download a resource that is not available and keeps displaying the loader.

How do I ignore requests that takes too long to respond so that my load function can execute - hide the loader and show the content.

I do not want to use the $(document).ready() function, since it does not wait until my background image has finished loading...

how about using load event for that particular background image element only instead of the window. `$('#divcontainingbackgournimage').load(function(){..` — bipen, Jun 12 '13 at 18:45
yeah, but what if you have many other elements you want to have finished loading before you display your content...? The only way then to target them individually? — DextrousDave, Jun 12 '13 at 18:49
@bipen DIVs don't have a load event even any background-image has been setted — A. Wolff, Jun 12 '13 at 18:54

Blender · Accepted Answer · 2013-06-12T18:51:42.777

3

If you're just trying to preload the background image, you could do something like this:

$(document).ready(function() {
    $('#preLoader').show();
    $('#container').hide();

    $('<img>', {src: '/url/of/image.jpg'}).load(function() {
        $('#preLoader').hide();
        $('#container').show();
    }).error(function() {
        // Something went wrong
    });
});

A better alternative would be to use the waitForImages plugin:

$(document).ready(function() {
    $('#preLoader').show();
    $('#container').hide();

    $(document).waitForImages(function() {
        $('#preLoader').hide();
        $('#container').show();
    });
});

edited Jun 12 '13 at 18:51

answered Jun 12 '13 at 18:46

Blender

289,723
53
439
496

yeah I guess I can do that. What if there are many more elements you want to wait for to finish loading? – DextrousDave Jun 12 '13 at 18:48
@DextrousDave: There's a plugin you can use: https://github.com/alexanderdickson/waitForImages – Blender Jun 12 '13 at 18:49
thanks for your help. Any other way to do this without using plugin? – DextrousDave Jun 12 '13 at 18:57
@DextrousDave: The minified plugin is absolutely tiny. It's 1000 characters long, which is only four times longer than my first example – Blender Jun 12 '13 at 19:00

score 0 · Answer 2 · answered Jun 12 '13 at 19:16

You should try some trick. Make change in your page source for all elements like gravatar:

<img data-src="http://some-very-busy-resource.org/avatar.jpg" />

See, it is no "src" attribute presents, browser definetly doesn't load this image and page loads fast, you script shows the body as you expect.

Then, to load ignored images add this code:

   $('body').find('img').each(function(){
        src = $(this).data('src');

        if ('undefined' !== typeof src) {
            $(this).attr('src', src);   
        }
    });

So, new script should be like next:

$(function(){
    $('#preLoader').hide();
    $('#container').show();
    $('body').find('img').each(function(){
        src = $(this).data('src');
        if ('undefined' !== typeof src) {
            $(this).attr('src', src);   
        }
    });
});

Preloading with $(window).load() issue

2 Answers2