Preloading pictures on page

Preloading is not likely to help. In fact it might hurt performance. Preloading, which downloads images in the background by creating an image object in JavaScript, is useful when the images are not initially displayed. For example mouseover images or on click images benefit from preloading. All of your images are part of the initial display so preloading won't speed things up.

I have seen some articles that contend loading one large image is faster than loading several small images. This suggests you could improve loading by combining the images in each column and those in the row on the bottom.

Many of your images are text with a background. You might consider using one background image in each box (a floated div) and using styled text. This would reduce the number of images and the size.

Otherwise, poor loading performance is the price of the design that relys heavily on images.

I am not up to scratch on the performance issues mentioned by ljo8877 but here is how you do it


    <SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      preload_image_object = new Image();
      // set image url
      image_url = new Array();
      image_url[0] = "http://mydomain.com/image0.gif";
      image_url[1] = "http://mydomain.com/image1.gif";
      image_url[2] = "http://mydomain.com/image2.gif";
      image_url[3] = "http://mydomain.com/image3.gif";

       var i = 0;
       for(i=0; i<=3; i++)
         preload_image_object.src = image_url[i];
    }

    //-->
    </SCRIPT>    
 

I've looked at you're site:

For photo's you should use JPG (or some times PNG) not GIF! GIF is beter for illustrations and text (sharp lines) not for photo's. For photo's the files become to big. (JPG also supports more colors, what is also an advantage for photo's. GIF (256 colors) JPG (16 millions colors)

for example: http://www.balzannasrv.com/images/aboutus/wedding-1.gif

will be (for example) 3 times smaller if you use .JPG

Patrick

No offense intended GavinMannion, there is a detail to correct in your script. The for loop doesn't stop and wait for an image to download. So the way you have it, it really doen't do the job except for small mouseover images. When the for loop starts the next image, it will stop downloading the previous image if you use only one image object.

The script should be change as follows, so all images will download in the background and not just the last.

<SCRIPT language="JavaScript">
    <!--

    if (document.images)
    {
      image_url = new Array();
      imag_url[0] = new Image();
      image_url[0].src = "http://mydomain.com/image0.gif";
      imag_url[1] = new Image();
      image_url[1].src = "http://mydomain.com/image1.gif";
      imag_url[2] = new Image();      
      image_url[2].src = "http://mydomain.com/image2.gif";
      imag_url[3] = new Image();
      image_url[3].src = "http://mydomain.com/image3.gif";
    }

    //-->
    </SCRIPT>

This way each image has its own image object.

language= is severely deprecated in client-side scripting

If the images are actually numbered sequentially, this should do it.

<script type="text/javascript">
if(document.images) {
  for(var i=0; i<4; i++) {
    image_url[i] = new Image();
    image_url[i].src = "/image" + i + ".gif";
    }
  }
</script>

Thanks guys for the script. I am not so familiar with the java scripting. Where should I place the script.
I didn't understand the coment from kiddanger. Could you please explain how it should be integrated?

J0K0

Oops. I made a mistake in this example. The [i] had to be added to this line preload_image_object.src = image_url[i]; like preload_image_object[i].src = image_url[i]; as shown below.

<script type="text/javascript?>

    if (document.images)    {
     
         // set image url
         image_url = new Array();
         image_url[0] = "/image0.gif";
         image_url[1] = "/image1.gif";
         image_url[2] = "/image2.gif";
         image_url[3] = "/image3.gif";

         preload_image_object = new Array();
         for(var i=0; i<=image_url.length; i++) {
             preload_image_object[i] = new Image();
             preload_image_object[i].src = image_url[i];
        }
    }
</script>

And in the explanation of Kiddanger's technique this line
     Change the 4 to the last image number.
should say
    Change the 4 to the one more than last image number.

This line was actually a debug and is commented out in the example:
   document.write('<img src="' + image_url[i].src + '" />');

Thanks for the grade! We're glad to help; however, I see that you haven't yet change your site??

How do I know that it is working. I tried tro open the page with 56K modem and it didn't go in the order I have set it up.

J0K0

Please refer to my first comment. I don't believe you will see an improvement.

What happens is that the images start to download in the background while the html continues to download. The html page finishes much faster than the images and starts to download the images again. The browser deals with this so I don't think the image downloads twice, but the second call is deferred until the image is in cache.

Since page text downloads very quickly, preloading the images hasn't really gained anything ... unless of course--maybe--if you preloaded the images on the first page where they don't display so they'd be in the browser's cache when the second page is downloaded.

Otherwise, you need to try one of the other solutions mentioned earlier:

reduce the number of images
   1. Combine contiguous images
   2. Use one image for all text only boxes

make the images smaller
    1. try different formats
    2. reducing quality with your image software

It doesn't make the page load faster.  It preloads the images so when you call for them, they come out of cache instead of loading from the web site.  You can split up the image loading and the image displaying into separate functions and then use a DHTML onload to display them but you will see the red x box until the image loads.  To not see it, you turn off display and then after everything is loaded, you then turn everything on with display: block or display: inline.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
var image_url = new Array();
var imageargs = ["die1","die2","die3","die4","die5","die6"];
if(document.images) {
  for(var i=0; i<imageargs.length; i++) {
    image_url[i] = new Image();
    image_url[i].src = '/images/' + imageargs[i]+'.gif';
    }
  }
function showit() {
  for(var i=0; i<imageargs.length; i++) {
    document.getElementById(imageargs[i]).style.display='inline';
    }
  }
</script>
</head>
<body onload="showit()">
<img id="die1" src="/images/die1.gif" style="display: none" />
<img id="die2" src="/images/die2.gif" style="display: none" />
<img id="die3" src="/images/die3.gif" style="display: none" />
<img id="die4" src="/images/die4.gif" style="display: none" />
<img id="die5" src="/images/die5.gif" style="display: none" />
<img id="die6" src="/images/die6.gif" style="display: none" />
</body>
</html>