How not to load all images on a page on load

Question

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?

Answer 1

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"&gt;
</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.

Answer 2

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.

Answer 3

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({
    data_source: data
});

You can also add custom thumbnails:

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

Galleria recognizes both ways as valid data sources.