# Solved: Rollovers slow to load - is it my browser?



## DrP (Jul 23, 2005)

Would someone mind looking at this web page?
It works fine in Firefox.
In IE, if I move my cursor across the rollover buttons quickly, the rollovers are slow to appear, even if they're already loaded. Is it my computer?

http://www.mrpdesigns.co.uk/contact_us.php

Also, the people I'm doing ti for are finding some of the grey boxes turn yellow into IE when moving the cursor around. I can't see this, can anyone else?

Help mucho appreciated, as always!


----------



## Rockn (Jul 29, 2001)

Must be your computer not caching the images and downloading them each time you mouse over them. Works fine on my end. Try clearing your browser cache and load the page again.


----------



## DrP (Jul 23, 2005)

I've just cleared the cache and it still does it. I don't think it is a case of IE loading the images each time, it is just slow to process the rollover I think.
Any signs of the yellow boxes?


----------



## rhynes (Aug 14, 2006)

On first load with both ff and ie, they are slow to roll on hover... once loaded they are quick in both browsers...

Whiskey tasting, my kinda website


----------



## Big-K (Nov 22, 2003)

works fine fer me


----------



## DrP (Jul 23, 2005)

Thanks for looking for me.


----------



## covert215 (Apr 22, 2006)

The first time I rolled over some of them, the image was replaced by a white space. However, the next time it worked properly.


----------



## thecoalman (Mar 6, 2006)

For me they are not loading either, I watched my firewall traffic monitor and there was traffic immeditely on hovering over the image. My guess is because of the way you have it set up in the CSS. 

I'd suggest setting one set as backgrounds in individual TD's in a table and use the CSS opacity property on the other images to make them roll. That or do a google search on preloading images.


----------



## DrP (Jul 23, 2005)

Oo er... I don't want to use tables. Image rollovers are now preloaded. I'm convinced it's my browser causing the delays between the rollovers. Any yellow boxes?


----------



## Rockn (Jul 29, 2001)

What are yellow boxes? Anyway, the images for your rollovers are half a megabyte each which may explain the slowness if someone were on dialup. Might want to try saving them as JPGs to see if it speeds up a bit. Preloading of images should occur for the second set of images in your rollover not the first and should be at the top of your page not the bottom.


----------



## DrP (Jul 23, 2005)

Rockn said:


> the images for your rollovers are half a megabyte each which may explain the slowness if someone were on dialup.


No, they aren't. They range from 318 to 773 bytes!



Rockn said:


> Preloading of images should occur for the second set of images in your rollover not the first


That is what I've done.



Rockn said:


> and should be at the top of your page not the bottom.


Why?

As for the yellow boxes, I haven't a clue what they are but the client keeps seeing them when he moves around the page with his cursor!


----------



## Rockn (Jul 29, 2001)

You are correct about the image size, my bits and bytes are mixed up.

Preloading means the images load before anything else on the page, but yours are at the bottom of the page and will be loaded after the rest of the content. Normally I see preloads set in the body tag using onLoad event. I thought the prloads were the initial images on first looking...too early yet.


They yellow boxes must be the empty alt tags in your preload images.


----------



## DrP (Jul 23, 2005)

Hmmmm. The yellow boxes were apparently there before I added the preloaded images, so it can't be that. If no-one else is seeing it I'll leave that for now.

My method with the preloaded images works without javascript, something I've done deliberately. The rollover images are in a div at the bottom of the page and set to display: hidden in the CSS. They still load (last, so they don't delay the page) but don't show. Of course, the fact they're already loaded means the rollovers work first time without a delay.
That explain it? They preloading before they're needed. They don't need to preload before everything else on the page - that'll just delay the rest of the page loading won't it?


----------



## Rockn (Jul 29, 2001)

The idea behind preloading is to load all images into cache before the rest of the page loads, not when you use them. It seems to work regardless and may just be a user setting on the browser side where you are seeing the delay. They load fine for the majority of individuals that have replied so far and that is really all you can ask for.


----------



## covert215 (Apr 22, 2006)

In dreamweaver, rollovers are set up like:


```
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
```
goes in the head of the page

each rollover looks like:

```
[URL=LINK][IMG alt=""]INITIAL IMAGE[/IMG][/URL][URL=#][/URL]
```


----------



## DrP (Jul 23, 2005)

As I said, I didn't want to use javascript...
I disagree with Rockn's interpretation of preloading. The method I've used is preloading the image before they are used which is still preloading. The problem with preloading them before the page loads is that the page load is delayed until the images have been loaded. I see that as unnecessary - who wants to look at a blank page while the images are loading into the cache? The exercise will also be pointless if javascript is turned off. My way the page loads so the user has the page in front of them, then as soon as the page has completed loading the rollover images preload just in case they are needed. Surely, that is more user friendly?
Thanks for having a look and checking. As the rollovers seem to be working fine and the html validates I'm going to leave it at that.
If anyone sees any mysterious yellow patches then let me know!


----------



## thecoalman (Mar 6, 2006)

DrP said:


> My method with the preloaded images works without javascript, something I've done deliberately. The rollover images are in a div at the bottom of the page and set to display: hidden in the CSS.


I didn't notice the div at the bottom, it seems to work now. What was wrong?


----------



## DrP (Jul 23, 2005)

Basically, when I view the page in IE there is a delay with the rollover image which has nothing to do with the rollover images being loaded. It doesn't do it on the lap-top next to me!


----------



## Rockn (Jul 29, 2001)

Preloading is preloading and your interpretation is exactly what I have said whether it loads before the entire page loads or after the main body of the page loads, it is all client side and it all goes into the browser cache. Symantecs shamantics..

Regardless here are a couple other things you can do to make pages load faster.

Define heights and widths for your images and tables. None of your "preloaded" images have them defined. Otherwise it isn't slow at all.


----------



## thecoalman (Mar 6, 2006)

DrP said:


> Basically, when I view the page in IE there is a delay with the rollover image


I noticed that before but it seems to be fixed now, as i mentioned the images weren't being preloaded as I saw there was internet activity in my firewall monitor on mousover. I was asking what you did to fix it.


----------



## DrP (Jul 23, 2005)

thecoalman said:


> I was asking what you did to fix it.


Nothing!
Do you mean adding the images in a div at the bottom of the page and setting them to display:hidden?



Rockn said:


> Regardless here are a couple other things you can do to make pages load faster.
> Define heights and widths for your images and tables. None of your "preloaded" images have them defined.


Does defining the heights and widths for the images really make them load any faster? I don't see how it would. Could you explain that?


----------



## thecoalman (Mar 6, 2006)

DrP said:


> Nothing!
> Do you mean adding the images in a div at the bottom of the page and setting them to display:hidden?


Oh I see, you didn't have that div with the images originally?



> Does defining the heights and widths for the images really make them load any faster? I don't see how it would. Could you explain that?


By giving them a dimension the browser doesn't have to calculate the dimensions of the div or make space for the images as it's loading them. Visually it will make a difference on a really slow connection/computer becase the browser will be recalculating the div or image placeholder for each new image. Besides that AFAIK it won't have any affect. A 10k file is a 10 k file.


----------



## DrP (Jul 23, 2005)

thecoalman said:


> Oh I see, you didn't have that div with the images originally?.


No, sorry. I added that when you menitioned your firewall the first time.



thecoalman said:


> By giving them a dimension the browser doesn't have to calculate the dimensions of the div or make space for the images as it's loading them. Visually it will make a difference on a really slow connection/computer becase the browser will be recalculating the div or image placeholder for each new image. Besides that AFAIK it won't have any affect. A 10k file is a 10 k file.


I see. Seeing as they are set to display:hidden I can set the dimensions of the images in this hidden div to 1px by 1px.

A few people I know are still seeing yellow boxes on the form. I don't get it. They are using IE and some of the textboxes on the left are turning yellow. I'm trying to get more information from them. I've set the background color of everything on the page to transparent unless a colour is needed, but it is still doing it. There are only about 4 hex colour codes in the stylesheet and none of them are yellow!

I seem to remember a site which allowed people to view their sites in different browsers. Does anyone remember the address?


----------



## thecoalman (Mar 6, 2006)

DrP said:


> A few people I know are still seeing yellow boxes on the form. I don't get it. They are using IE and some of the textboxes on the left are turning yellow. I'm trying to get more information from them.


The Google toolbar will do that if you have auto fill for forms enabled.


----------



## DrP (Jul 23, 2005)

That's what I'm after! Why would it only do it on four of the textboxes though?


----------



## thecoalman (Mar 6, 2006)

Becasue it will fill whatever it can identify... For whatever reason it thinks it can fill "position" but it fills it with my last name.  There's standards for naming the text fields, see the loink here:

http://www.google.com/support/toolbar/bin/answer.py?answer=18183&topic=117


----------



## DrP (Jul 23, 2005)

Thanks for that Coalman. It looks quite limiting what you can do to set your forms up for the Google Toolbar so I'll leave it.
Thanks for identifying the cause of the problem though. I just couldn't figure out what was making those grey boxes change colour.
Thanks again.


----------

