View Full Version : Some Help
02-07-2007, 03:12 AM
The reason I need this is because some images are very big and take a while to load, so while it's loading, the "Hover to View" would be replaced with, http://vinthian.axemwarclan.net/images/loading.gif and when the browser is done loading the image, it'll show the main image. Once it's done loading, it stays that way until u refresh, it doesn't disappear.
If anyone can offer me some help, it'd be appreciated.
(vinthian at gmail dot com)
02-07-2007, 04:30 AM
Why is the picture only shown after a hover-out (after a onhover)?
02-07-2007, 12:04 PM
it's to save bandwidth. the image doesn't load until u hover over it, and doesn't show until it's done loading. i want it to be replaced with the loading image while it's loading.
02-07-2007, 02:40 PM
and doesn't show until it's done loading.
But it does not show it when it's done loading,
it shows it after it's done loading AND after hover-out.
02-07-2007, 02:48 PM
noo, i mean i want the loading image to be shown before it's done loading, and the main image to be shown after it's done loading.
Hover Image > Mouse Over > Loading Image > Done Loading > Main Image
sry for the confusion :S
02-07-2007, 03:11 PM
I'm not even talking about that step yet.
First you have to fix the that image is shown as soon it's done loading and NOT after it's done loading and hover-out.
test it , put you mouse on top of the box and don't move it.
The picture will not even come up after 1 minute.
02-07-2007, 03:21 PM
hmm, looks like i replaced over with out yesterday, it's fixed now... now how would i go about doing what i was trying to explain?
02-07-2007, 06:56 PM
First of all, with all of the mouseover images on your page, I would preload all of those images so they would take less time to load on mouseover...try using something like this in your script to preload images:
var preload_image_object = new Image();
var URL_prefix = 'http://www.yourSite.com/images/';
// set image url
var image_url = new Array();
image_url = URL_prefix+"image1.gif";
image_url = URL_prefix+"image2.png";
image_url = URL_prefix+"image3.png";
for(i=0; i<image_url.length; i++)
preload_image_object.src = image_url[i];
}Now, as far as replacing the original image with a loading image while the new image loads, give this a try:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
margin:0 0 0 -400px;
border:5px double #eee;
margin:0 0 0 -32px;
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<div class="img_div" id="img1" style="display:block;top:50px">
<img class="image" onload="hideWorkingGIF('img1','deathscythe.png');" onmouseover="changeImg('img1',this,'deathscythe.png');" src="http://vinthian.axemwarclan.net/images/default.png" />
<div class="img_div" id="img2" style="display:block;top:250px">
<img class="image" onload="hideWorkingGIF('img2','scorpionvsspiderman.png');" onmouseover="changeImg('img2',this,'scorpionvsspiderman.png');" src="http://vinthian.axemwarclan.net/images/default.png" />
<div class="img_div" id="img3" style="display:block;top:450px">
<img class="image" onload="hideWorkingGIF('img3','gambit.png');" onmouseover="changeImg('img3',this,'gambit.png');" src="http://vinthian.axemwarclan.net/images/default.png" />
var dir = "http://vinthian.axemwarclan.net/images/";
imgDivObj = document.getElementById(imgDivID);
if (!document.getElementById("loading_" + imgName))
var workingBox = document.createElement("div");
var animatedGif = document.createElement("img");
animatedGif.src = dir + "loading.gif";
workingBox.id = "loading_" + imgName;
document.getElementById("loading_" + imgName).className = "loading";
document.getElementById("loading_" + imgName).style.top = imgDivObj.offsetTop + 25 + "px";
if (imageObj.src != dir + imgName)
imgDivObj.style.display = "none";
imageObj.src = dir + imgName;
if (document.getElementById("loading_" + imgName))
document.getElementById("loading_" + imgName).style.display = "none";
document.getElementById(imgDivID).style.display = "";
Powered by vBulletin® Version 4.2.2 Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.