View Full Version : Some Help

02-07-2007, 03:12 AM
Ok, I know nothing about javascript and I only need one script/code done for me. I'm trying to get a script that'll replace an image's src with a "loading" image while the actual image is loading. My site is http://vinthian.axemwarclan.net/images/

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:

if (document.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[0] = URL_prefix+"image1.gif";
image_url[1] = URL_prefix+"image2.png";
image_url[2] = 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">


<title>Nav Menu</title>

<style type="text/css">

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" />

<script type="text/javascript">

var dir = "http://vinthian.axemwarclan.net/images/";

function changeImg(imgDivID,imageObj,imgName)
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;

function hideWorkingGIF(imgDivID,imgName)
if (document.getElementById("loading_" + imgName))
document.getElementById("loading_" + imgName).style.display = "none";
document.getElementById(imgDivID).style.display = "";