Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    conflict btw unload fonction&preload fonction

    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

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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();">

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    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...

  • #4
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/uselif...2/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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •