javascript & image preloading

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'));
});

Answer 2

I would do it on DOMReady. But it essentially attempts to load the file at the same time the page is loading, there should be no hanging. However it will not "lazy" load the image. Usually this technique is used to load images that MAY be required. I would load a low res first, in the HTML, and via javascript update the images once the high res images are ready. Or better yet, simply load a Web safe image and give users a link to the high res if they want it.

Bad idea to force people to download high-res images. That's a good way to have people avoid your site.

EDIT:

So you could do something like:

<img src="src/to/placeholder.jpg" data-path="path/to/high/res.jpg" class="lazyload"/>

Then have a javascript function do:

$('.lazyload').each(function(){
    $(this).attr('src',$(this).data('path'));
});

Not sure if my code is exact, but you get the point.

EDIT: When the DOM is loading you are essentially loading the same placeholder image for all of your product images. In the background, javascript requests the real image based on the path in data-path. Then when the image is done loading, the placeholder source gets updated with a nicer image. Add some fade or whatever if you like.

Answer 3

I wrote this simple jQuery plugin to help with this.

imgur.js

/*
    Plugin: IMGUR
    Author: Drew Dahlman ( www.drewdahlman.com )
    Version: 0.0.2
*/

    (function($) {

        $.fn.imgur = function(options,loaded) {
            var defaults = {
                img: '',
            }

            if(loaded){
                var callback = {
                    loaded: loaded
                }
            }

            return this.each(function() {

                var settings = $.extend(defaults,options);
                var callbacks = $.extend(callback,loaded);
                var _image;

                var $this = $(this);

                function init(){
                    if(callbacks.loaded != null){
                        _image = new Image();
                        _image.onLoad = loaded();
                        _image.src = settings.img;
                    }
                }
                function loaded(){
                    if(callbacks.loaded != null){
                        callbacks.loaded($this,settings.img);
                    }
                }
                init();
        });
        };

    })(jQuery);

How to use

in your html assign a class if you have multiple images to load.

<img src='' data-image='images/image1.jpg' class='preload'/>

Then in your javascript call ( this assumes you're using jQuery )

<script>
$(".preload").each(function(){
 var $this = $(this);
 $this.imgur({
  img: $this.data('image') // in your case
 },function(el,data){
   el.attr('src',data);
 });
});
</script>

This will use the data-image to load the image then when it's loaded it will add that data to your element that you've supplied it with.

cheers!