•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,556 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,446 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1959 | Replies: 5
 |
•
•
Join Date: Mar 2007
Location: RI
Posts: 147
Reputation: 
Rep Power: 2
Solved Threads: 2
Junior Poster
preloading images Good evening,
I have a webpage that changes the image when you mousover another image and I was wondering if I could preload the images to make it faster. it takes about 2.5 seconds to change the image. Should I set my meta tags to cache? The page is at http://www.ribbb.com/images/catologi...9/g60-g69.html
I am not trying to sight advertise I just needed some input.
thanks
Dave
I have a webpage that changes the image when you mousover another image and I was wondering if I could preload the images to make it faster. it takes about 2.5 seconds to change the image. Should I set my meta tags to cache? The page is at http://www.ribbb.com/images/catologi...9/g60-g69.html
I am not trying to sight advertise I just needed some input.
thanks
Dave
current personal projects The H8ers Club && PCLinuxOS non-official One stop forum
•
•
Join Date: Oct 2007
Location: South Africa
Posts: 60
Reputation:
Rep Power: 2
Solved Threads: 7
Junior Poster in Training
Hi there
I think you just need a little javascript routine that reads the image files inside the head part of your page. This will cause the images to be read by the browser before the rest of the page is and they will thus be ready when the page has loaded.
For example
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img1.src = "overbutton.png";
img2 = new Image();
img2.src = "outbutton.png"
}
</script>
Hope this helps. 8-)
I think you just need a little javascript routine that reads the image files inside the head part of your page. This will cause the images to be read by the browser before the rest of the page is and they will thus be ready when the page has loaded.
For example
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img1.src = "overbutton.png";
img2 = new Image();
img2.src = "outbutton.png"
}
</script>
Hope this helps. 8-)
•
•
Join Date: Mar 2007
Location: RI
Posts: 147
Reputation:
Rep Power: 2
Solved Threads: 2
Junior Poster
•
•
•
•
Originally Posted by RoryGren 
Hi there
I think you just need a little javascript routine that reads the image files inside the head part of your page. This will cause the images to be read by the browser before the rest of the page is and they will thus be ready when the page has loaded.
For example
<SCRIPT LANGUAGE = JAVASCRIPT>
if (document.images)
{
img1 = new Image();
img1.src = "overbutton.png";
img2 = new Image();
img2.src = "outbutton.png"
}
</script>
Hope this helps. 8-)
thanks but would that cause the page to load slower? Appreciate the advice
current personal projects The H8ers Club && PCLinuxOS non-official One stop forum
•
•
Join Date: Oct 2007
Location: South Africa
Posts: 60
Reputation:
Rep Power: 2
Solved Threads: 7
Junior Poster in Training
Yes, unfortunately it will. You have the choice of either the page loading slower initially and the mouseover image change happening instantly, or the page loading a little faster and the images taking longer to show when you mouseover.
•
•
Join Date: Jan 2007
Posts: 2,604
Reputation:
Rep Power: 7
Solved Threads: 119
Another trick would be to load the full size images and render them small.
If I am looking at your page, I would very much prefer that the images stay larger all the time. I hate jumpy things happening when the mouse goes over something. They usually make me hit my back button immediately.
And it's worse if the expanded image from one mouseover image covers another one, which is the one I want. If I have to do a lot of jiggerrymousery to get to the one I want, I just leave instead.
If I am looking at your page, I would very much prefer that the images stay larger all the time. I hate jumpy things happening when the mouse goes over something. They usually make me hit my back button immediately.
And it's worse if the expanded image from one mouseover image covers another one, which is the one I want. If I have to do a lot of jiggerrymousery to get to the one I want, I just leave instead.
Last edited by MidiMagic : Oct 19th, 2007 at 1:11 am.
Daylight-saving time uses more gasoline
•
•
Join Date: Mar 2007
Location: RI
Posts: 147
Reputation:
Rep Power: 2
Solved Threads: 2
Junior Poster
•
•
•
•
Originally Posted by MidiMagic
Another trick would be to load the full size images and render them small.
If I am looking at your page, I would very much prefer that the images stay larger all the time. I hate jumpy things happening when the mouse goes over something. They usually make me hit my back button immediately.
And it's worse if the expanded image from one mouseover image covers another one, which is the one I want. If I have to do a lot of jiggerrymousery to get to the one I want, I just leave instead.
I understand what you are saying. The images just jump up in a designated area that is why the butts of the cues are horizontal. It's not my website I just do what I am told, thanks for the advice though
current personal projects The H8ers Club && PCLinuxOS non-official One stop forum
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- preloading images (HTML and CSS)
- Help! Flash Preloader for videos (Graphics and Multimedia)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: How to find latitude and longitude using javascripts
- Next Thread: Problem in naming the cloned rows
