Question

I need to understand how image preloading works in browsers. Lets say I have this piece of code:

<script type="text/javascript" language="JavaScript">
    companyLogo = new Image();
    companyLogo.src = "/images/image1.jpg"
</script>

then somewhere below my page i have following.

<img src= "/images/image1.jpg" /> 

now as you can see, first i preloaded the image /images/image1.jpg And then i am using it within my image tag.

my website has product images, which are very HD and my entire page sometimes hangs while main image is loading. i dont mind size being big for my images, what I want to do is….keep loading the page with content & other elements and show the image as soon as its loaded (however do not HANG/PAUSE the page just because image is not loaded yet).

Now the above approach, what does it exactally do? does it preload the image in cache and waits and hangs the page? or it does exactally what i am trying to do?

Thanks

Answer 1

While it sounds like you should be optimising your images instead, I;m happy to show you how I would do it.

Don’t include the image src, hide it in data. (Use correct width and height so your page doesn’t jump when they eventually load.)

<img src="1px.gif" data-src="http://the.real.src" class="justyouwait" style="width:10000000px; height:1000000px;" />

Then on dom ready, i.e. when your page has loaded, load them

$(function(){
    $('img.justyouwait').each(function(){
        $(this).attr('src', $(this).data('src'));
    });
});

Or add a bit of niceness

$('img.justyouwait').each(function(){
    $(this).css({opacity:0}).load(function(){
        $(this).animate({opacity:1},1000); // fade them in
    }).attr('src', $(this).data('src'));
});