How not to load all images on a page on load

I have a page with a list of开发者_开发问答 jpg images on the page. The div that contains images is hidden and works as images source for Galleria jQuery image gallery plugin. So, when I load a page, it takes long to load it because it loads all images. Is there a way not to load all these images on page load, but just when galleria needs them?

You can load a JSON array of images instead of putting them in the source code:

var data = [
    {
        image: 'img1.jpg',
        thumb: 'thumb1.jpg',
        title: 'my first image',
        description: 'Lorem ipsum caption',
        link: 'http://domain.com'
    },
    {
        image: 'img2.jpg',
        thumb: 'thumb2.jpg',
        title: 'my second image',
        description: 'Another caption',
        link: '/path/to/destination.html'
    }
];

$('#container').galleria({
    dataSource: data
});

You can also add custom thumbnails:

<a href="big.jpg"><img src="thumb.jpg"></a>

Galleria recognizes both ways as valid data sources.

I don't know whether and how it will be able to cooperate with your Gallery plugin, but there is a Lazy Loading plugin for jQuery. It loads images when they enter the viewport. Maybe worth a look.

Other than that, you would have to tweak the gallery plugin to load the images contained when it shows the div. One idea would be to give all the images a src property pointing to a 1x1 transparent GIF:

<div class="hidden">
 <img id="image1" src="http://domain.com/images/1x1.gif">
</div>  

and to keep a JavaScript array with the real image sources:

<script>
ImageSources = new Array();
ImageSources[1] = "http://domain.com/images/big_fat_image.jpg";
...
</script>

and to assign the real src property the moment the div gets shown.

The demo page of jQuery image lazy load plugin doesn't seem to work to me on FF3.6 on Mac. I was watching the HTTP requests with the Net tab of Firebug and I could see all the images loaded onload.

Maybe it's worth it to check out this plugin called JAIL that loads only images visible in the viewport.

Your HTML can look like:

<img name="/global/images/sample1.jpg" src="/global/images/blank.gif" width="width" height="height"/>

and the JS

$('img').asynchImageLoader();

Yes, depending on how you load Galleria you have several options..

If you load it via js, you can load the js in a dynamic way, same way Google Analytics loads it's js:

 (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

(of course, change the address of the js loads)

Alternative solution, to save the round trip of the js (especially if it's coming from another source and it's parallel), don't call .loadTheme before the images are loaded.