I'm making a "Photo Wall", which is essentially a very long page consisting of many thumbnail photo's. The photo's are the main reason to be at the page, so I would like them to be loaded already when the page loads. I'm wondering if I can preload them on the landing page (index.php), but I'm wondering if that would slow down the home page. Can someone give me insight into how this preloading function works. Would the homepage load slow? Would the homepage be laggy in other operations because it has many things to load in the background?
(I would just do it and see what happens, but I have no way of accurately testing the speed of the website. Thus, I would like to just know ahead of time what will be functional.)
I'm using CS6 Adobe Dreamweaver's built in preloading function here:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
Except I add my own images that I'd like to preload manually (Works fine, and I would add the images for the future page here.):
<body
onload="MM_preloadImages('path/image.gif','path/image2.gif','path/image3.gif')">
I'll try to answer in short.
Yes, it will slow your webpage because you will be loading images in the background. No, most of your visitors will not notice that you are still loading images in the background.
What this function does is that it loads images from your server to the browser in the background. Dreamweaver uses this function to implement the image rollover effect, this effect replaces one image for another and dreamweaver gives you the option to download this images in the background so that the page appears to be more responsive. The trick is simple, you have image A.jpg, when the mouse passes over it replaces it with image B.jpg, but if the browser has to download B.jpg the page will look laggy, that's why if preloads images.
As a general rule you should not preload elements not used on that page, or not needed soon. As you mention, if you have many images you should try to figure out a way of requesting images in advance that does not involves downloading all the images.
Some galleries take into consideration the image you are looking at, and then downloads the following 2 or 3 images in advance. This is a better approach for multiple images, you don't want visitors preloading 250 images just to find out that they are only watching 2 or 3. If you decide you implement this functionality you only need to call the MM_preloadImages function with the url of the image you want to preload. It's not that dificult, you only need to attach it to the action that loads your image and set it to also preload the next image.