• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 905
  • Last Modified:

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.
0
BDaniel
Asked:
BDaniel
  • 5
  • 3
1 Solution
 
jbirkCommented:
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
0
 
BDanielAuthor Commented:
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.
0
 
jbirkCommented:
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
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

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

Thank you for your time
BDaniel.
0
 
mgkCommented:
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 -->
0
 
jbirkCommented:
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
0
 
jbirkCommented:
Alright, here's seom code.  I haven't had much chance to test it, but it works on Netscape 4 and IE 5....  I think the onload event handling for the oimages may cause a problem for pre version 4 browsers, but I'm not sure.  There may be a workaround if it does.  I'll have to look into it later.

<HTML>
<HEAD>
<TITLE>Iceland Safari Travel 2000</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!-- hide
var num_loaded_images = 0;
var check = 0;
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";

var imgs = new Array(14);
for(var i = 1; i <= 14; i++)
 {if (i == 2)
   {imgs[i] = 1;}
  else
   {
    imgs[i] = new Image();
    imgs[i].onload = count_images;
    imgs[i].src = "images/" + i + ".gif";
   }
 }
} //end if document.images

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

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

function count_images()
 {
  if (++num_loaded_images == 13)
   {check++;
    loadme();
   }
 }

function loadme()
{
  if (check > 1)
   for(var i = 1; i <= 14; i++)
    {//alert("on:"+i);
     if (i != 2)
      {if (i == 4)
        eval("document.images['image1'].src=imgs[i].src");
         else if (i == 9)
        eval("document.images['image2'].src=imgs[i].src");
         else if (i == 12)
        eval("document.images['image3'].src=imgs[i].src");
       else
        eval("document.images['img"+i+"'].src=imgs[i].src");
      }
    }
}

// End Hiding -->
</SCRIPT>  

</HEAD>
<BODY BGCOLOR=#FFFFFF onload="check++; loadme();">
<div align="center"><br>
  <TABLE VALIGN="middle" BORDER=0 CELLPADDING=0 CELLSPACING=0>
        <TR><TD><IMG SRC="images/spacer.gif" WIDTH=28 HEIGHT=1></TD>
            <TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1></TD>
            <TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1></TD>
            <TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1></TD>
            <TD><IMG SRC="images/spacer.gif" WIDTH=98 HEIGHT=1></TD>
            <TD><IMG SRC="images/spacer.gif" WIDTH=157 HEIGHT=1></TD>
        </TR>
        <TR><TD COLSPAN=6><IMG SRC="images/spacer.gif" WIDTH=345 HEIGHT=146 name="img1"></TD>
        </TR>
        <TR><TD COLSPAN=6><IMG SRC="images/2.gif" WIDTH=345 HEIGHT=29 name="altimg"></TD>
        </TR>
        <TR><TD COLSPAN=6><IMG SRC="images/spacer.gif" WIDTH=345 HEIGHT=22 name="img3"></TD>
        </TR>
        <TR><TD COLSPAN=2>
              <a href="about/about.html" onMouseOver="imageon('image1');" onMouseOut="imageoff('image1')"><IMG SRC="images/4.gif" WIDTH=41 HEIGHT=37 border="0" name="image1"></a></TD>
            <TD COLSPAN=3 ROWSPAN=2><IMG SRC="images/spacer.gif" WIDTH=147 HEIGHT=45 name="img5"></TD>
            <TD ROWSPAN=5><IMG SRC="images/spacer.gif" WIDTH=157 HEIGHT=157 name="img6"></TD>
        </TR>
        <TR><TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=41 HEIGHT=8 name="img7"></TD>
        </TR>
        <TR><TD ROWSPAN=3><IMG SRC="images/spacer.gif" WIDTH=28 HEIGHT=112 name="img8"></TD>
            <TD COLSPAN=2>
               <a href="../safari/html/tours/tours.htm" onmouseover="imageon('image2');" onmouseout="imageoff('image2')"><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=31  border="0" name="image2"></a></TD>
            <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=129 HEIGHT=31 name="img10"></TD>
        </TR>
        <TR><TD COLSPAN=2 ROWSPAN=2><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=81 name="img11"></TD>
               
            <TD><a href="contact/contact.html" onMouseOver="imageon('image3');" onMouseOut="imageoff('image3')"><img src="images/spacer.gif" width=31 height=31 border="0"  name="image3"></a></TD>
            <TD ROWSPAN=2><IMG SRC="images/spacer.gif" WIDTH=98 HEIGHT=81 name="img13"></TD>
        </TR>
        <TR><TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=50 name="img14"></TD>
        </TR>
</TABLE>
</div>
</BODY>
</HTML>

-Josh
0
 
BDanielAuthor Commented:
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.
0
 
jbirkCommented:
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
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now