Faster Loading Images

Description

When you have exhibits with many pictures, loading can become a problem. Occasionally browsers don't load images chronologically so your first image may not appear before your last.

These script changes adjust this to load only the images that can be seen on screen. As you cycle through a slideshow or scroll to other images will load.

This script saves on bandwidth too, as images won't load unless the viewer is actually attempting to view the images.

Instructions

Update your JQuery file.

JQuery v1.1.2 comes with indexhibit by default.
This is quite outdated, and lots of new functionality is missing from it, so delete the file from your FTP account:

/ndxz-studio/site/js/jquery.js

And download + upload this new file, it should be v1.3.2
http://indexhibit.wikidot.com/local--files/code-snippets:faster-loading-images/jquery.js

Add javascript to your theme

You should be able to find your theme in /ndxz-studio/site/ then the name of your theme, eatock is the default.

Open up index.php, and add the following inside the <header> … </header> tags

<script type='text/javascript'> 
    $(function() {          
        $("img").lazyload({
            placeholder : "http://yoursite/images/grey.gif",
            effect      : "fadeIn",
        });
    });
</script>

Replace yoursite, with the url of your site.

Upload grey.gif

Download the following file:
http://indexhibit.wikidot.com/local--files/code-snippets:faster-loading-images/grey.gif

and upload to your /images folder on your FTP.

You should now have lazy load installed, and your site should seem a bit quicker.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License