Link to home
Start Free TrialLog in
Avatar of BDaniel
BDaniel

asked on

Preload and onload

One my splash page I have 15 images I want one off them to be displayed first and the other all in once when they are all in the cache.  

I've been trying to use this but with no effort
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers

function count_images() { if (++num_loaded_images == 14) ????(); }
var num_loaded_images = 0;

var images = new Array(14);
for(var i = 0; i < 14; i++) {
      images[i] = new Image();
      images[i].onload = count_images;
      images[i].src = "images/" + i + ".gif";
}


// End Hiding -->

I know this is just for the pics that will be cached before they are displayed.
All the images are in table.

Thanks.
Avatar of jbirk
jbirk
Just brainstorming here, but you could load the other images via a normal JavaScript preload, and in their place on the table, put transparent gifs (1X1 stretched to fit the size).  Then when all the javascript loaded images are finished, swap them into the proper spot.  That way they should all appear at least close to at the same time.  The one you want loaded first could just be loaded via normal html.

Just an idea.  If you want me to elaborate with code, just ask.
-Josh
Avatar of BDaniel
BDaniel

ASKER

That would be great Josh,

But I´m also using dual image flip on the splash you can see the page
here
http://notendur.centrum.is/~daniel/safari/splashtest.htm

You see I want the heading (2.gif) to be the first thing that the surfer see.
Then the rest all at once when it has finished loading.

You are welcome to elaborate with the code.

Thanks.
Avatar of jbirk
jbirk
I have to get some sleep.  I'll work on this tomorrow if I get a chance (the company I work for is moving, so I may not).  If someone else beats me to it, that's fine, but if not, I'll work on it then.

-Josh
Avatar of BDaniel
BDaniel

ASKER

Common please help me out here guys,
I can't figure it out myself.

Thank you for your time
BDaniel.
Avatar of mgk
mgk
I think the answer from jbirk is basically correct, but I think I would add an onload() to your <BODY> tag, calling a function to load the last 14 images. I looked at your HTML page and you'll need to add a NAME attribute to your <IMG> tags so that you can replace the src successfully. Anyway, I haven't tested this but it should be OK - I hope - maybe the eval is wrong? Anyway, hope it helps...


<!-- hide from none JavaScript Browsers
var num_loaded_images = 0;
function count_images() {
  if (++num_loaded_images == 14) {
    for(var i = 0; i < 14; i++) {
      document.images['i'].src=images[i].src;
  }
}

var images = new Array(14);
function onload(){
  for(var i = 0; i < 14; i++) {
    images[i] = new Image();
    images[i].onload = count_images;
    images[i].src = "images/" + i + ".gif";
  }
}
// End Hiding -->
Avatar of jbirk
jbirk
One thing I noticed in your code, was your check for compatibility.  The way it is now it's ok, by I think checking for document.images is more efficient and more reliable, in the case of some strange browser now covered in the cases you used.

So with a few changes, here is some code:


if (document.images)
{
altimg = new Image()
altimg.src = "images/2.gif"

image1= new Image();
image1.src = "images/4.gif";
image1on = new Image();
image1on.src = "images/4ab.gif";
image1alt = new Image();
image1alt.src = "images/2.gif";
image1alton = new Image();
image1alton.src = "images/2about.gif";

image2 = new Image();
image2.src = "images/9.gif";
image2on = new Image();
image2on.src = "images/9to.gif";
image2alt = new Image();
image2alt.src = "images/2.gif";
image2alton = new Image();
image2alton.src = "images/2tours.gif";

image3 = new Image();
image3.src = "images/12.gif";
image3on = new Image();
image3on.src = "images/12co.gif";
image3alt = new Image();
image3alt.src = "images/2.gif";
image3alton = new Image();
image3alton.src = "images/2contact.gif";
}

function imageon(name)   {
if (document.images)
  {document[name].src = eval(name + "on.src");
    document["altimg"].src = eval(name + "alton.src");
  }
}
function imageoff(name)  {
if (document.images)
  {document[name].src = eval(name + ".src");
    document["altimg"].src = eval(name + "alt.src");
  }
}


Now of course the new code for loading all the other images needs to be added to that.  mqk provided some of that code already.  I'll work up a complete set of the code here in a few minutes.

-Josh
ASKER CERTIFIED SOLUTION
Avatar of jbirk
jbirk
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of BDaniel
BDaniel

ASKER

Million thanks, It looks great!
I haven't tried it yet,
but when I have I let you know.
It doesn't matter if don't work in older browsers I'm going to have two versions of this splash one with no java and this one.
And again thanks alot.

Do you recommend some code for the browser detection.

B. Daniel.
Avatar of jbirk
jbirk
You could search the previously asked questions in the JavaScript section.  I'm sure that question has been answered about 40 times.  I know I've answered it at least twice.  That way you will save points.

Let me know if you have any problems with this code.

-Josh