Preloading and Onmouseover problems

[BBB]

I have got dozens of pages made but when i put them online it takes forever to load. Also my onmouseover buttons take forever to "switch" off and on.

The logo and buttons are the same across dozens of pages, how can i speed up this by cache or something for the images?

www.rorta.com/faqpre.html is an example.

Thankyou. :D

[kevin]

the page I looked at (the homepage I guess) loaded OK for me (dialup connection 46k). I think there is an error in you fist javascript code though:

<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img2 = new Image();
img1.src = "0007tn_r2_c2_f2.jpg";
img2.src = "0007tn_r2_c4_f2.jpg"
}
</SCRIPT>

the fist line maybe would be better written like this:

<SCRIPT LANGUAGE="JAVASCRIPT">

see if that helps the mouseover image to preload. Right now your mouseover image is not preloading so the effect is delayed the first time you mouseover a button.

There is now way to speed up the caching of an image except to reduce the file size of the image. But unless the reduction in file size is considerable you will not really notice much difference unless there are many many images.
Your page does not have that many images.

[BBB]

Thanks for your reply.

That piece of code is one of the many i have added from different sites to get images to preload. I have added then removed dozens of codes over the past few days trying to get them to preloading.

This one doesnt seem to work either. I just added 2 buttons to this code to test if they behave differently then the rest of the buttons but they dont.

For me it takes 5 seconds on mouseover for the second image to display and another 5 on mouseoff for it to go back to normal. Im on 56k, i may have to see if i can try this on another computer. I dont know what wrong.

:confused:

I just dont want to upload dozens of pages to my new host and have to pull them all down to change code because they are loading bad. :(

[kevin]

try it like this too:

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
img1 = new Image();
img2 = new Image();
img1.src = "0007tn_r2_c2_f2.jpg";
img2.src = "0007tn_r2_c4_f2.jpg"
//-->
</SCRIPT>

[BBB]

Hmm nope still no cigar. :confused:

The 2 buttons i'm testing the preload on are "Forums" and "About Us". They are still taking a few seconds to switch back and forward like the others.

Actually the "Games" button switches back to normal on mouseoff instantly but its coded the same as the rest, with no preload "attempts" made on it. But on mouseover it still takes the same time.

Now im confused. :(

[Aboveaverage]

This doesn't help BBB but I've had that same delay in mouseover as well, and in the process of looking for help ran across the links below.

I am still learning javascript, so use this site for mouse-over scripts:

http://javascript.internet.com/generators/preload-images.html

This is their instruction page.

http://www.webdeveloper.com/javascript/javascript_preload_roll.html

The comments support something I've read elsewhere occasionally about rollover images & preload, namely that it is only necessary to preload the image the mouseover is changing TO, not both, since the 1st one will appear already as the page is loaded.

Usually though the suggested mouseover scripts I've seen are coded to preload both. I'd be interested in other's commnents on that?

--
it occurred to me that my question should go elsewhere so i'm going now....

[Gregory]

well, kinda cheating, and probably not could practice...

but you COULD load the image at the bottom of the page INVISIBLY, and then do

image1.src=image9.src;

or similar, i suppose.

or just make a bunch of <br> tags and make the overflow hidden, either way.

again, anyone else would probably adivse you against this,but hey, im greg:cool:

[scoutt]

how can you say it doesn't work when you don't even try what we suggested?

<SCRIPT LANGUAGE = JAVASCRIPT>

that has to be quoted and in lower case. but actually take it out as the language attrib is deprecated.

<script type="text/javascript">

besides, how many preloaders are you going to use?

you have the one here and then you are using DreamWeavers preloader. BUT, you are calling the one Kevin showed you all arong as the images are not in the root folder.

images/0007tn_r2_c2_f2.jpg

you are loading them like this

img1.src = "0007tn_r2_c2_f2.jpg";

what is it preloading?

[agent002]

Originally posted by Gregory
or just make a bunch of <br> tags and make the overflow hidden, either way.

ouch...looking bad. looking really bad here now.

But still, you could try it... loading the images putting <img src="whatever.gif" alt="Whatever" style="display:none"> somewhere on the page.

[Gregory]

Originally posted by agent002
ouch...looking bad. looking really bad here now.

But still, you could try it... loading the images putting <img src="whatever.gif" alt="Whatever" style="display:none"> somewhere on the page.

like i said, not good practice, you should try the other things first, but if all else files its a method that should work

[ucm]

I'm with Gregory on this one...

I've been trying to get the rollover code to load the images ONLY once but still, every single time, it trys to d/l the images over and over, what i've done is use all of the code as well as code from the webdeveloper.com rollover creater and every single time, it trys to d/l it again...

basically, I:

&nbsp;&nbsp;* use the scripts and html code and move the mouse over
and out of the image rapidly several times
&nbsp;&nbsp;* then i've moved the mouse off the image
&nbsp;&nbsp;* unpluged my puter from the cable modem
&nbsp;&nbsp;* moved the mouse over the image

it's here that i get a msg asking me if i want to go offline or try again so i click on try again and sure enough i get the red X image placeholder :-/



i figure that the BEST way to get rollovers to work is to forget about preloading them ( at least with a javascript ) and instead use something like:


update - see my next post below for the updated code...


This way the browser will load ALLLLL of the images and then it just hides and shows them based on the user's action--------this worx MUCH bettter since the browser doesn't try to d/l the images every single time plus as a bonus; with the introduction of the OnMouseDown event, you can run code or change the page with window.location='blah.html'


all you have to do is change the images to whatever images you would like to use and of course change thye widths and heights of each of them...

and if you copy it more than once in your page, just change the number '1' to something unique in each div image group...

( i 'Just Now' made this )this rocks in ie6, how does it farrel( is that a word? ) in other browsers?

[ucm]

update - it seems that when you hold down the mouse button on the highlighted image, then it unhighlights and the down image appears but to the tight of the out image which pops up under the cursor.... im working on this right now...

The following code pulls off the mouse over perfectly, i had to add ( document.getElementById('img3Down').style.display='none'; ) to the mouseover image to get rid of that duplicate image [ it actually wasn't a duplicate image, it was the down image displayed at the same time the out image was, but atlas now it's all fixed up ]

<div>
<img id="img3FirstLoadImage" style="cursor:hand;display:'';" src="normal.gif" width="35" height="24"
onmouseover="this.style.display='none';document.getElementById('img3Over').style.display='';">
<img id="img3Over" style="cursor:hand;display:'none';" src="mouseover.gif" width="35" height="24"
onmousedown="this.style.display='none';document.getElementById('img3Down').style.display='';"
onmouseout= "this.style.display='none';
document.getElementById('img3Down').style.display='none';document.getElementById('img3Out').style.di splay='';">
<img id="img3Out" style="cursor:hand;display:'none';" src="normal.gif" width="35" height="24"
onmouseover="this.style.display='none';document.getElementById('img3Over').style.display='';">
<img id="img3Down" style="cursor:hand;display:'none';" src="mousedown.gif" width="35" height="24"
onmouseover="this.style.display='none';document.getElementById('img3Out').style.display='';">
</div>

[MrPerlishells]

I got this from Webmonkey. It is called on after loading the page. Such that the page loads first before it tries to preload the images. It's also easier to add/delete the image you need to preload.

<body onLoad="doPreload()">

<script type="text/javascript" language="JavaScript">
<!-- begin preload script
function doPreload()
{
var the_images = new Array('header_3x2r.jpg', 'header_3x3r.jpg', 'header_3x4r.jpg', 'header_3x5r.jpg', 'header_3x6r.jpg', 'header_3x7r.jpg', 'header_1x1r.gif');
preloadImages(the_images);
}

function preloadImages(the_images_array) {
for(var loop = 0; loop < the_images_array.length; loop++)
{
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}
// end preload script -->
</script>

[ucm]

Yes, i know that this is an old thread, but bare with me...

i figured this out tonight ( i probably should have already known this too, but.. bahh.. misplaced milk )

we start with this quote from one my posts in this thread:

basically, I:

* use the scripts and html code and move the mouse over
and out of the image rapidly several times
* then i've moved the mouse off the image
* unpluged my puter from the cable modem
* moved the mouse over the image

it's here that i get a msg asking me if i want to go offline or try again so i click on try again and sure enough i get the red X image placeholder :-/



this issue i am going to speak about in THIS post has to do with caching of images ( commonly known as preloading ) and why when i have tried everyone's suggestions in this thread, i get the browser re-checking the server for the images every single time ( no biggie on cable but on a 56k, whoa hooollld on now )


the thing is that i have always ( apon rebuilding any of my computers over the years ) set the browser's: 'check for newer files' setting to 'every visit to the page'...

the advantage to this is that the browser will always get the current copy of a webpage or image off the server ( thus avoiding that rare issue where an old copy of a page is displayed instead of a newly created and uploaded version of the same page )

however, unless you get reall crafty, setting your browser to this setting will effectively prevent mouseovers and other preloading effects from working the way that they are intended ( load the images ONLY ONCE on page load ) and will cause what i have quoted above to occur to anyone...

of course, there's ah FIX!! for that, just set your browser's 'check for newer files' setting to 'automatically'... i find that the higher the browser version, that before mentioned problem [ loading old pages instead of the newest verison ] tends to not occur hardly at all compared to earlier versions of the same browser...

for instance, i set mine to automatically just now, and repeated the steps in my quote; sure enough, the preloading and mouse overs work perfectly as intended... Of course, im using ie6 and thus wont speak for other browsers... i've been using ie since ver 4 which makes my statements above based on my particular experiences not from guessing...


Now for some ideas on modified versions of mouseovers:

of course, some or many of the visitors to your site may have their browsers set to 'every visit to the page'... how do we get mouse overs ( and other simular effects ) to work for them withOUT having them wait a couple seconds for their browser to re-download the images ( every time ) and causing additional serverload?

this question can be answered in many many many ways... it's all based on craftiness and what you're wanting to do.

for me, one thing i intend to implement is along the lines of having a div ( or an iframe ) with it's style set to have no borders at all and also to include overflow:hidden; and then put inside of it 2x images like <imgOVER blahCode><br><imgOUT blahCode> and then on mouse over, have the div scroll halfway down to reveal the imgOUT image and then on mouseout to scroll it to the top to reveal the imgOVER image...

this process is very simular to how back in the old days, programmers would use image maps for the various custom button graphic states in development systems like visual basic ver 3.x ( wow! rememeber ver 3? )... basically; it doesn't 'have' to be just one or two images, it can be several... not only that but you don't have to fool around with creating an array of images and their src's and figure out what's what and where's where and etc etc...

not only could you have an image for over and out but also for mouse down... come to think of it... you could have the div/iframe scroll down 2px and to the right 2px to give the illusion that the rollover is a "button" ( plus, there won't be any dirty rectangle to deal with )

what's sweeeeet about this particular idea is that the images ( animated or not ) are loaded once "guranteed" ( even if you're going to be dealing with large images with a huge filesize )and then you just move them around... the smaller the images, the faster they move and appear seemless to the visitor...


of course, that's just one way of achieveing the desired results... im certain that there are many many other ways to get the job done too; im just going to use that one myself ( till i find a better way of course )