Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Page Design

Pre-loading images



12:26 pm on Jan 15, 2001 (gmt 0)

Ok, I'm pretty new to this game and feel like I'm learning a lot of useful stuff all the time but the thing that I really want to find out about I am stumped on.

I am producing small sites for local businesses and work using an older version of Homesite. I have been looking at sites of my client's competitors which aren't necessarily brilliant and may not have cost an awful lot to produce but the majority do seem to have the images preloaded.

Nearly all my clients ask for a site that is quick to download and I really want to know how to preload.

Am I going to need to learn these reems of coding for preloading or is there a shortcut that I am missing - maybe with some other web publishing software?


12:44 pm on Jan 15, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

mr_v, welcome to the WebmasterWorld Forums.

I often do pre-loading of images, or design so that I can reuse elements that have already been cached. You're smart to pay close attention to download times -- most "new to the game designers" don't.

I use JavaScript to pre-load images. For example, if mypicture.gif is very likely to be needed on the next click, I would insert this code at the very bottom of the HTML:

<script language="JavaScript">
image1=new Image(width,height)

That puts the image for the next page into the cache at the end of loading the present page.

I prefer to put the script at the bottom of the HTML, so that the present page has a chance to render first. Putting it in the header or calling an external .js file will slow down the current page.


12:59 pm on Jan 15, 2001 (gmt 0)

tedster, thanks for your prompt reply and your tip. Does this also work for the opening page - can I use this technique so that the opening page will load quickly?
I tend to use recurring themes throughout my pages so that there aren't too many new images required for each new page, but that first page is always the problem. I keep seeing coding like this on those competitors' pages that I was referring too:

<script language="JavaScript">
function MM_preloadImages() { //v1.2
if (document.images) {
var imgFiles = MM_preloadImages.arguments;
var preloadArray = new Array();
for (var i=0; i<imgFiles.length; i++) {
preloadArray[i] = new Image;
preloadArray[i].src = imgFiles[i];

function MM_swapImage() { //v1.2
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.MM_swapImgData;
for (i=0; i < (MM_swapImage.arguments.length-2); i+=3) {
objStr = MM_swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) ¦¦
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null ¦¦ oldArray[j-1]!=obj)?obj.src:oldArray[j];
obj.src = MM_swapImage.arguments[i+2];
} }
document.MM_swapImgData = swapArray; //used for restore
<script language="JavaScript">
function MM_swapImgRestore() { //v1.2
if (document.MM_swapImgData != null)
for (var i=0; i<(document.MM_swapImgData.length-1); i+=2)
document.MM_swapImgData[i].src = document.MM_swapImgData[i+1];

<body bgcolor="#FFF6BC" text="#000000" link="#CC0000" vlink="#660000" alink="#CC0000" background="images/backgrnd.gif">
<!-- #BeginBehavior MM_swapImage6 -->
<script language='JavaScript'>
<!-- #EndBehavior MM_swapImage6 --> <!-- #BeginBehavior MM_swapImage5 -->
<script language='JavaScript'>
<!-- #EndBehavior MM_swapImage5 --> <!-- #BeginBehavior MM_swapImage4 -->
<script language='JavaScript'>
<!-- #EndBehavior MM_swapImage4 --> <!-- #BeginBehavior MM_swapImage3 -->
<script language='JavaScript'>
<!-- #EndBehavior MM_swapImage3 --> <!-- #BeginBehavior MM_swapImage2 -->
<script language='JavaScript'>
<!-- #EndBehavior MM_swapImage2 --> <!-- #BeginBehavior MM_swapImage1 -->
<script language='JavaScript'>
<!-- #EndBehavior MM_swapImage1 -->

sorry - that's a lot of coding. Is this something standard that can be altered so that it works for my images?

mr v


1:34 pm on Jan 15, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Yep, the first page is always the problem -- you've got nothing in the cache yet so you've got to send it all down.

Here it looks like you're talking about pre-loading images for a rollover effect.

On the index page, pre-loading the rollover means the page takes longer to download...but then the rollover will be nearly instantaneous, the way you need it to be. Without the pre-loading, the visitor would have to wait for the image call on every mouseover, and that doesn't work well at all (although I've seen more than one site coded this way).

I'd say your best bet for improving download times on a site entry page is to optimize the file size of the images. Lots of software exists for this purpose -- SpinWave [spinwave.com] offers some free online utilities that might help.

Yes, that script you're using can be simplified for any particular page -- but you'll still only get a small improvement in download. If you're ready to learn a little javascript, you might want to wade into it. But as I said, the gain in download time would be minor.

One good trick is to make sure that, even if the page takes a while to download, something useful and interesting gets rendered on the screen right away. The most important factor here is not having one big layout table go from top to bottom, but breaking the table into two parts so the browser can figure out the top part quickly.


12:53 pm on Jan 16, 2001 (gmt 0)

I believe you can also use width & height statements for your images and the table (I believe) will layout the text as the pictures are downloading.



1:22 pm on Jan 16, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Right you are, using width and height does help the browser render the text earlier, and is highly recommended.

But things aren't always straightforward. Depending on how deeply nested tables are, it can still be a long wait for anything to appear on screen. Have you ever had a page say "document done", but the browser took another 10-15 seconds to render anything at all? That's often a sign of a complex table structure.

Explorer does a better job than Netscape does with rendering the text early on.

One other factor that can delay elements appearing is jpeg compression. Even after the download is finished, the client still needs to decompress a jpeg on their own machine, and with high compression percentages, this also adds time. The progressive mode helps in this area, but sometimes it is considered aesthetically unacceptable.


4:38 pm on Jan 16, 2001 (gmt 0)

you don't need separate function calls for each graphic that you want to preload because your for loop will take care of all your arguments in one MM_preloadImages call.


i agree use more tables, not just one big table. i don't think nesting tables is a good idea either. use colspan and rowspan if required.

keep your code as small and as logically simple as possible, and remember every character,including whitespace, adds to download time as well.


3:19 am on Jan 17, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


A couple of tips.

Remove the comment tags from you JavaScript.
It will reduce you code k size greatly.

Create a separate JavaScript file that is called remotely so the spiders do not have to wade through it before finding your real content.
Place it before the /head

<script src="yourjavascriptname.js">

Make sure only the JavaScript code in yourjavascriptname.js leave out the script and /script tags

Arrays are a nice way to preload images however there are other (shorter) ways to directly name files so they can be reused on each page.

But that is another topic.



9:52 am on Jan 17, 2001 (gmt 0)

thank you one and all for your advice - as a side issue, what factors determine which images are loaded first - is there any way to ensure the majority of your page appears whilst the largest image is still loading?


10:48 am on Jan 17, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

>> what factors determine which images are loaded first

The biggest factor is what browser is rendering the page. Unfortunately. No 100% insurance policies on what order things will show up when the page gets complex.

I have found one technique that does a pretty good job. I find a key chunk of text (maybe with a small inline graphic) that will be high on the page. I put that in a separate DIV, absolutely positioned and at the top of the BODY section of the HTML.

In every browser I've checked, that text comes in immediately, like in 1 second. I figure this way I can give the visitor something to look at while the header and nav bar, etc, fill in around it.


10:18 am on Jan 22, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Probably because we were focusing on javascript, none of us mentioned the most primitive, but also the most compatible way, of pre-loading images.

If you don't need javascript for any other reason, you can preload images for the next page just by adding them to the bottom of the current page in the regular HTML, but make the width and height 1 pixel x 1 pixel.

This will put the images into the cache, but also create visible 1 pixel squares on the page. If they look too distracting, they can be hidden in the page design -- for instance, put them against a colored table background, or placed way down below the end of the content with a big transparent gif, or off the top of the page with a negative top dimension in CSS.


Featured Threads

Hot Threads This Week

Hot Threads This Month