scripts cause site to load slowly - need suggestions

[jordangma]

Thanks for all the great scripts and helpful forums...this site has been a lifesaver for me! There's only one problem I'm having that I can't find the answer to:

I'm using 2 scripts in my site: Ultimate Fade-in slideshow (v1.5) and Image w/ description tooltip. They work great! But it seems all that scripting causes the pages to load really slowly. I'm reluctant to make a separate splash page so I'm wondering if there is a way to preload images from different pages on the site AFTER the home page loads. I have tried scripts that preload images but they all slow down the loading of the home page!

My sample home page is (note the links aren't set up correctly yet): http://www.serenitynowyoga.net/jordanhomepage.htm
And the slowest loading pages inside the site are: http://www.serenitynowyoga.net/jordanteachers.htm and http://www.serenitynowyoga.net/jordangallery.htm

I'd really appreciate any help! I searched the forums and web but couldn't find the answer. Thanks!

[jscheuer1]

On this page:

http://www.serenitynowyoga.net/jordanteachers.htm

The images are all about 30k. They don't need to be. For example, here is Viki's image (one of the largest at about 31k) at about 9k:



That's with no perceptible loss in quality. With a slight loss or in full gray scale, it could be 7k or less. If all of the images were compressed using an image optimization program, you would cut at least about 2/3rds off of the load time.

On this page:

http://www.serenitynowyoga.net/jordangallery.htm

If you were to compress the images and also use thumbnail images instead of the full sized images for the little versions, you would save a lot on load time there as well.

You could preload images on other pages as you suggest but, it would be best to take care of these other things first. To preload on another page, just add a preload routine to a page's onload event. Here is a good preload routine that will add itself to a page's onload event:

<script type="text/javascript">
function preload_images(){

//Enter your images (and paths, if any) in the preloads array:
var preloads=['image_1.jpg', 'image_2.jpg', 'image_3.jpg', 'image_4.jpg'];

/////////// Stop Editing ////////////

var loadem=function(im){
var pimg=new Image();
pimg.src=im;
}
for (var i_tem = 0; i_tem < preloads.length; i_tem++)
loadem(preloads[i_tem]);
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", preload_images, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", preload_images );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            preload_images();
        };
    }
    else
        window.onload = preload_images;
}
</script>

Just list the images as shown (red) in the array. Put it in the head of any page that will be visited before the page that uses the images, preferably a page that visitors are likely to linger on and that has little or no other scripts on it.

[ddadmin]

Very nice analysis by John! For me, I actually don't discern any real slowness with your pages' loading, though I am on broadband. The first thing to try is always to optimize your images, as they add up very quickly based on the average size of yours.

[jordangma]

Thanks for the advice...much appreciated! I'll work on the images first like you suggest, and hopefully that will cure the problem.

-Jordan

[jscheuer1]

It occurs to me that preloading images in the manner I mentioned might not be the best way to do what essentially is background preloading. In some browsers, when the page that is doing this preloading is revisited, the images will be preloaded again, even if they are already cached. If (as may seem like wise idea in a way) you should choose to do the preloading identically on several pages that might be visited before the images are required, they may keep getting preloaded with the last ones never actually getting cached. Also, if javascript is disabled, none of the images will preload. This last item might not matter if all of the images are to be used exclusively in scripts but, a good script always has a way to display its content to a non-javascript enabled browser.

Here is my alternative preloading idea that will have none of the disadvantages of the original one I outlined in this thread. You can simply put the images on any given page or pages like so -

Put this in the head of the preloading page(s) or add its styles to your stylesheet for the page(s):

<style type="text/css">
#preload {
position:absolute;
top:-30000px;
left:-30000px;
visibility:hidden;
}
#preload img {
position:absolute;
top:0;
left:0;
}
</style>

Put this just before the closing </body> tag on the same page(s):

<div id="preload">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
<img src="photo4.jpg">
<img src="photo5.jpg">
</div>

This method has potential drawbacks as well. The most important one is that it cannot be used on a page that has any sort of onload event because, that event will be delayed until all of the images have loaded. Another is that, in some browsers, the user will see that the images are being loaded as information in the status bar or as a whirling icon or progress bar somewhere on the browser's chrome. This second one isn't so bad, as it is what is happening. In some very old browsers, the images will be visible but, in browsers like that, most of your pages would probably be trash anyway, even without this.