onLoad function for a image that is to be displayed.

  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

I am trying to write a javascript that uses an array of images. I want to switch between images, but when I switch , I want to use a "Now loading" image to let the user know that everything is going good. When the new image is loaded, I want to 'switch' images. I don't know the correct syntax to use the onload function. . . been searching online for a good example but nothing. . . I am currently using a timeout function that holds for 4 seconds, but it isn't what I want.

Please help.

Thanks in advance.

oh. . if you want to see what it is for. . check this: http://www.room3art.com
and click on projects.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Daemonguy
  • Moderator
  • Web Master
  • User avatar
  • Posts: 2700
  • Loc: Somewhere outside the box in Sarasota, FL.

Post 3+ Months Ago

I am not sure if this will work for you, but it's something I threw together back around 1998, I think. It rotates through images, at the delay you specify, and the new image is not displayed until the next is loaded. You can use any image format you wish -- of course you may need to modify it to suit your specific needs.

Cheers.
Code: [ Select ]
<script language="JavaScript">

//Customize delay, and beginning
delay = 500
imageNum = 1

// Preload animation images
theImages = new Array()

// In this example, images are in images/location dir, relative to present

for(i = 1; i < 12; i++) { 
    theImages[i] = new Image() 
    theImages[i].src = "images/location/commonname" + i + ".jpg"
}

// There are also 12 images to parse through, all with a common name, plus a number plus .jpg. Ex. picture1.jpg, picture2.jpg. 

function animate() {
    if (imageNum < 12) {
        document.animation.src = theImages[imageNum].src 
        imageNum++ 
    }
    if (imageNum > 1) {
        delay = 100

    }
    if (imageNum > 11) {
        (imageNum = 1)
            delay = 2600
    }
}
// I think the above is fairly obvious -- delays before and after first and last images.

</script>
  1. <script language="JavaScript">
  2. //Customize delay, and beginning
  3. delay = 500
  4. imageNum = 1
  5. // Preload animation images
  6. theImages = new Array()
  7. // In this example, images are in images/location dir, relative to present
  8. for(i = 1; i < 12; i++) { 
  9.     theImages[i] = new Image() 
  10.     theImages[i].src = "images/location/commonname" + i + ".jpg"
  11. }
  12. // There are also 12 images to parse through, all with a common name, plus a number plus .jpg. Ex. picture1.jpg, picture2.jpg. 
  13. function animate() {
  14.     if (imageNum < 12) {
  15.         document.animation.src = theImages[imageNum].src 
  16.         imageNum++ 
  17.     }
  18.     if (imageNum > 1) {
  19.         delay = 100
  20.     }
  21.     if (imageNum > 11) {
  22.         (imageNum = 1)
  23.             delay = 2600
  24.     }
  25. }
  26. // I think the above is fairly obvious -- delays before and after first and last images.
  27. </script>


Not sure if this meets your requirements. Enjoy!
Cheers.
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

I am not looking for rotating images. I am looking toward a solution that will show the image after it is done loading.

I would like to use the onLoad() function to determine that the image is loaded. If you looke at http://www.room3art.com and browse to the projects section, you will see the images. And also see how they are desplayed.

Try to rotate the images. Simple code. But. . . . . instead of timing the "Now loading" gif image, I want to let that gif sit for as long as it needs to until the image they wannt to see is completely downloaded.

Thanks again.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I doubt this is exactly what you are looking for, but perhaps you can modify it for your needs. I created an image object and attached a function to its onload handler that would load its src as the src of the inline img after it was done loading. I used a second function to set the src of the image object using the filenames stored in an array.

Here is the code for the page:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<script type="text/javascript">
<!--
var newimage = new Array();
newimage[0] = "ozzu1.jpg";
newimage[1] = "ozzu2.jpg";
newimage[2] = "ozzu3.jpg";
newimage[3] = "ozzu4.jpg";

nextImage = new Image();
nextImage.onload = loadNext;

function swap(theIndex)
{
    if(theIndex != 0)
    {
        theIndex-=1;
        document.myImg.style.visibility = "visible";
        document.myImg.src = "loading.gif";
        nextImage.src = newimage[theIndex];
    }
}
function loadNext()
{
        document.myImg.src = nextImage.src;
}
// -->
</script>
<body>

<form action="">
<select name="imgSelect" onchange="swap(this.selectedIndex)">
<option>Select an Image</option>
<option>Image 1</option>
<option>Image 2</option>
<option>Image 3</option>
<option>Image 4</option>
</select>
</form>
<br>
<br>
<img name="myImg" src="loading.gif" style="visibility: hidden" alt="">
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled</title>
  5. </head>
  6. <script type="text/javascript">
  7. <!--
  8. var newimage = new Array();
  9. newimage[0] = "ozzu1.jpg";
  10. newimage[1] = "ozzu2.jpg";
  11. newimage[2] = "ozzu3.jpg";
  12. newimage[3] = "ozzu4.jpg";
  13. nextImage = new Image();
  14. nextImage.onload = loadNext;
  15. function swap(theIndex)
  16. {
  17.     if(theIndex != 0)
  18.     {
  19.         theIndex-=1;
  20.         document.myImg.style.visibility = "visible";
  21.         document.myImg.src = "loading.gif";
  22.         nextImage.src = newimage[theIndex];
  23.     }
  24. }
  25. function loadNext()
  26. {
  27.         document.myImg.src = nextImage.src;
  28. }
  29. // -->
  30. </script>
  31. <body>
  32. <form action="">
  33. <select name="imgSelect" onchange="swap(this.selectedIndex)">
  34. <option>Select an Image</option>
  35. <option>Image 1</option>
  36. <option>Image 2</option>
  37. <option>Image 3</option>
  38. <option>Image 4</option>
  39. </select>
  40. </form>
  41. <br>
  42. <br>
  43. <img name="myImg" src="loading.gif" style="visibility: hidden" alt="">
  44. </body>
  45. </html>
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

Thank you much!!! It works great!

ALL i NEEDED WAS THIS!!!!

nextImage.onload = loadNext;

function loadNext()
{
document.static.src = nextImage.src;
}

I already had the other coding that would cycle through images. Thanks for all your help. If you have any other ideas, please view the site, and let me know.

http://www.room3art.com ---->Projects section

-or- direct sample. Please use arrow to view *this* coding in action.

http://www.room3art.com/php/section.php ... Art1/Dots#

Paul
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

It looks good in internet explorer, but it's not working in Mozilla. You should change the name of your image to something other than "static" because that is a keyword in javascript, so you shouldn't use it as a name for something of your own. Offhand I don't see anything else that would cause it to fail in Mozilla.

I think it might also be a good idea to replace var total = 11; with var total = imgArray.length so that you can change the number of images without having to remember to change that variable.

I'm glad the onload handler worked out for you. :)
  • stinger
  • Graduate
  • Graduate
  • stinger
  • Posts: 157
  • Loc: San Jose, CA

Post 3+ Months Ago

Ok, great! I switched out the 'static' label. Thanks for the info on the cross-browser issues.

As far as the total-1 goes. . . .
The entire site is dynamically generated everytime you go to it. So. . the total is displayed through php array.length, and I did a quick fix for total -=1 sort of thing.

The site was a pro-bono for a art teacher at a high school. Everytime I saw him, he would mention how I could help him put up some images for his web site.

baaa. . . . I said. So, I took my skills and created a php based script-login file manager. Now he uploads all his own images whenever he wants.

The site is linked to through the incredible art department web site that hosts art and lesson plans along with featured artists. So it was really a great experience to be able to give him that.

I like this forum a lot, so I'll be on from time to time. Especially with the excellent help that I have recieved!

Thanks!! :D
  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

Looks great in Mozilla now :thumbsup:

I was half asleep last night when I posted that, and it didn't even occur to me that I was looking at the output of a php program. Now that I have my head screwed on straight and some coffee in my system, I see exactly what you mean.

Anyway, I'm glad everything worked out and you're sticking around because Ozzu is a great webmaster forum and can always use another talented programmer / webmaster. 8)

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 114 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.