...

View Full Version : conflict btw unload fonction&preload fonction



webspider
07-27-2002, 12:27 AM
hello.
Ok , i am a designer trying to use the most of JS. :)
Basically, my purpose is :
- to have a preloader for my page : a preload bar showing what is left before the page is loaded (because the page is about 300K)
- to use an image map with rollovers in the page, image map made in ImageReady with the automatic JS feature "preloadImages" for rollovers.

BUT, it seems there is a conflict btw the preload script and the preload of my images for the rollovers. The conflict is such as :
- if i don't call the preload bar the rollovers will work.
- i need the preload bar for the user to see smthg before the page is fully working, but then rollovers won't work...

So my question is : how do i make a imagemap with preloaded rollovers that will show up after a JS preload bar ?
If i "cut" the preload fonction of the rollovers they dont work anymore...

This must be a conflict btw the preloaded rollovers & and the preload bar but i dont know what i have to take out of these respective scripts to make it work.

I've search forums & tutorials without seeing this specific conflict, so i post here the codes :

- THE CODE FOR THE ROLLOVER IMAGEMAP PREALOADING, in the HEAD tag (made in ImageReady) :

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
index03_01_ImageMap_01_over = newImage("images/index03_01-ImageMap_01_over.jpg");
index03_01_ImageMap_06_over = newImage("images/index03_01-ImageMap_06_over.jpg");
index03_01_ImageMap_03_over = newImage("images/index03_01-ImageMap_03_over.jpg");
index03_01_ImageMap_04_over = newImage("images/index03_01-ImageMap_04_over.jpg");
index03_01_ImageMap_05_over = newImage("images/index03_01-ImageMap_05_over.jpg");
preloadFlag = true;
}
}

________________________________
this code is tirggered in the body : ONLOAD="preloadImages()"
________________________________


THEN, THE JS OF THE PRELAODER, called in the HEAD of the page with a src :

var imagenames=new Array( 'images/fond.jpg' , 'images/index03_01.jpg');

var yposition=250; //POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=15; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER

//DO NOT EDIT BEYOND THIS POINT
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length);
barheight=Math.max(barheight,25);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Images...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);
function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;

__________________________________

plse tell me if this whole thing is unsane ;)
Thank for your help

WS

MCookie
07-27-2002, 01:22 AM
Hi, you could try commenting out this line in the preloadser script:
//window.onload=loadimages;
..with your BODY tag like this: <body onload="preloadImages(); loadimages();">

adios
07-27-2002, 01:59 AM
Change this:

window.onload=loadimages;

...to this:

window.onload = function() {
preloadImages();loadimages();
}

Eliminate the onload=.... in the <body> tag. Still might be unsane, but should help...

webspider
07-27-2002, 04:27 PM
thank you MCookie & adios : both of your solutions seem to work. Well at least i have my progress bar AND the rollovers...

[Although it seems that the ImageReady code is kind of "buggy" on Netscape 6 (XP) (with or without the progress bar). ]

On IE 6 (XP) it works quite well, BUT (sorry) :
-when we mean preloading the rollovers, i thought it means that when the page appears all the rollovers are functional. Instead, the page download itself AND THEN you have still to wait for the rollovers to download... ???
- after emptying the cache, the progress bar is not progressing : it appears WITH the page downldg in the background... ???
-when i resize the window the progress bar reappears and i have to reload the page to make it disappear ... ???

You can see both versions here :
- with the progress bar :
http://www.mysunrise.ch/users/uselife/index2002/index03.html
- without the progress bar :
http://www.mysunrise.ch/users/uselife/index03.html

I think i should just make a white square on top of a black square with the words "ENTER" instead of all this sh&"... ;)

anyway, thank for your help again...
WS



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum