JavaScript Forum

**kbfirebreather** · 07-16-2008, 07:33 PM

I have a bunch of pictures corresponding to an event in it's own directory. All these albums are in a root directory.

What I want to do is "flash" each image, randomly, until the images are displayed.

I'm looking for it to show the image, a split second later, show another image, with maybe a fading transition in there.

I'm not really to sure where to even begin, so if anyone could start me off, that would be great.

I searched online, but I can only find gallery code, and nothing I'm really looking for.

**kbfirebreather** · 08:23 PM

Ok this is what I've got so far. I'm on the right track for what I need, but unfortunately I see some performance issues. I'm going to be showing a coupe hundred photos with this script, and when I did it with 85 photos, it took 30-60 seconds to preload them with the function then start the loop to display them.

What can I do to make sure their pre-loaded into memory before I need to display them later on? Is this possible to do?

Would I use this to achieve this goal?

Code:

for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

**kbfirebreather** · 08:25 PM

I've updated my script a little....well modified it from the original source I found. And I think I've got something that might work for me....but I need some testers.

Can you make an html file with this source code, load the page, wait for all the images to preload(should have the status bar go all the way through), then hit the button to start the javascript function.

It stops after it gets to the end of the array.

If you would be so kind to test this for me, please report, whether it seemed to go smoothly, or skip pictures, or totally lag the first time you run it.
But please make sure that the images are preloaded before you run the function!

HTML Code:

<!--

SlideShow with Captions and Cross-Fade
(C)2002 by CodeLifter.com

Shows images and accompanying captions.
Browsers: NS4-7,IE4-6
Fade effect only in IE; degrades gracefully.
NS4 shows default caption only.

INSTRUCTIONS:

Copy this entire script into a completely blank
page.  Follow the commented instructions within.

//-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<!-- 
Set up the caption font in the following style.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: bold;
color:      #123456;
}
</style>

<!-- 
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->

<script>

// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 100;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1] = 'http://faithcashdollar.com/Photos/CapeMay2005/3.jpg';
Picture[2] = 'http://faithcashdollar.com/Photos/CapeMay2005/4.jpg';
Picture[3] = 'http://faithcashdollar.com/Photos/CapeMay2005/2.jpg';
Picture[4] = 'http://faithcashdollar.com/Photos/CapeMay2005/46.jpg';
Picture[5] = 'http://faithcashdollar.com/Photos/CapeMay2005/48.jpg';
Picture[6] = 'http://faithcashdollar.com/Photos/CapeMay2005/49.jpg';
Picture[7] = 'http://faithcashdollar.com/Photos/CapeMay2005/50.jpg';
Picture[8] = 'http://faithcashdollar.com/Photos/CapeMay2005/51.jpg';
Picture[9] = 'http://faithcashdollar.com/Photos/CapeMay2005/5.jpg';
Picture[10] = 'http://faithcashdollar.com/Photos/CapeMay2005/6.jpg';
Picture[11] = 'http://faithcashdollar.com/Photos/CapeMay2005/7.jpg';
Picture[12] = 'http://faithcashdollar.com/Photos/CapeMay2005/8.jpg';
Picture[13] = 'http://faithcashdollar.com/Photos/CapeMay2005/9.jpg';
Picture[14] = 'http://faithcashdollar.com/Photos/CapeMay2005/10.jpg';
Picture[15] = 'http://faithcashdollar.com/Photos/CapeMay2005/11.jpg';
Picture[16] = 'http://faithcashdollar.com/Photos/CapeMay2005/12.jpg';
Picture[17] = 'http://faithcashdollar.com/Photos/CapeMay2005/13.jpg';
Picture[18] = 'http://faithcashdollar.com/Photos/CapeMay2005/14.jpg';
Picture[19] = 'http://faithcashdollar.com/Photos/CapeMay2005/15.jpg';
Picture[20] = 'http://faithcashdollar.com/Photos/CapeMay2005/16.jpg';
Picture[21] = 'http://faithcashdollar.com/Photos/CapeMay2005/17.jpg';
Picture[22] = 'http://faithcashdollar.com/Photos/CapeMay2005/18.jpg';
Picture[23] = 'http://faithcashdollar.com/Photos/CapeMay2005/19.jpg';
Picture[24] = 'http://faithcashdollar.com/Photos/CapeMay2005/20.jpg';
Picture[25] = 'http://faithcashdollar.com/Photos/CapeMay2005/21.jpg';
Picture[26] = 'http://faithcashdollar.com/Photos/CapeMay2005/22.jpg';
Picture[27] = 'http://faithcashdollar.com/Photos/CapeMay2005/23.jpg';
Picture[28] = 'http://faithcashdollar.com/Photos/CapeMay2005/24.jpg';
Picture[29] = 'http://faithcashdollar.com/Photos/CapeMay2005/25.jpg';
Picture[30] = 'http://faithcashdollar.com/Photos/CapeMay2005/26.jpg';
Picture[31] = 'http://faithcashdollar.com/Photos/CapeMay2005/27.jpg';
Picture[32] = 'http://faithcashdollar.com/Photos/CapeMay2005/28.jpg';
Picture[33] = 'http://faithcashdollar.com/Photos/CapeMay2005/29.jpg';
Picture[34] = 'http://faithcashdollar.com/Photos/CapeMay2005/30.jpg';
Picture[35] = 'http://faithcashdollar.com/Photos/CapeMay2005/31.jpg';
Picture[36] = 'http://faithcashdollar.com/Photos/CapeMay2005/32.jpg';
Picture[37] = 'http://faithcashdollar.com/Photos/CapeMay2005/33.jpg';
Picture[38] = 'http://faithcashdollar.com/Photos/CapeMay2005/34.jpg';
Picture[39] = 'http://faithcashdollar.com/Photos/CapeMay2005/35.jpg';
Picture[40] = 'http://faithcashdollar.com/Photos/CapeMay2005/36.jpg';
Picture[41] = 'http://faithcashdollar.com/Photos/CapeMay2005/37.jpg';
Picture[42] = 'http://faithcashdollar.com/Photos/CapeMay2005/38.jpg';
Picture[43] = 'http://faithcashdollar.com/Photos/CapeMay2005/39.jpg';
Picture[44] = 'http://faithcashdollar.com/Photos/CapeMay2005/40.jpg';
Picture[45] = 'http://faithcashdollar.com/Photos/CapeMay2005/41.jpg';
Picture[46] = 'http://faithcashdollar.com/Photos/CapeMay2005/42.jpg';
Picture[47] = 'http://faithcashdollar.com/Photos/CapeMay2005/43.jpg';
Picture[48] = 'http://faithcashdollar.com/Photos/CapeMay2005/44.jpg';
Picture[49] = 'http://faithcashdollar.com/Photos/CapeMay2005/45.jpg';
Picture[50] = 'http://faithcashdollar.com/Photos/CapeMay2005/47.jpg';
Picture[51] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/7.jpg';
Picture[52] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/9.jpg';
Picture[53] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/10.jpg';
Picture[54] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/11.jpg';
Picture[55] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/12.jpg';
Picture[56] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/1.jpg';
Picture[57] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/2.jpg';
Picture[58] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/3.jpg';
Picture[59] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/4.jpg';
Picture[60] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/5.jpg';
Picture[61] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/6.jpg';
Picture[62] = 'http://faithcashdollar.com/Photos/RofoHouseUninhibited/8.jpg';
Picture[63] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/1.jpg';
Picture[64] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/3.jpg';
Picture[65] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/4.jpg';
Picture[66] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/5.jpg';
Picture[67] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/6.jpg';
Picture[68] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/7.jpg';
Picture[69] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/8.jpg';
Picture[70] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/9.jpg';
Picture[71] = 'http://faithcashdollar.com/Photos/PoconosJuly2006/2.jpg';
Picture[72] = 'http://faithcashdollar.com/Photos/HopesBBQ/12.jpg';
Picture[73] = 'http://faithcashdollar.com/Photos/HopesBBQ/11.jpg';
Picture[74] = 'http://faithcashdollar.com/Photos/HopesBBQ/10.jpg';
Picture[75] = 'http://faithcashdollar.com/Photos/HopesBBQ/8.jpg';
Picture[76] = 'http://faithcashdollar.com/Photos/HopesBBQ/9.jpg';
Picture[77] = 'http://faithcashdollar.com/Photos/HopesBBQ/7.jpg';
Picture[78] = 'http://faithcashdollar.com/Photos/HopesBBQ/6.jpg';
Picture[79] = 'http://faithcashdollar.com/Photos/HopesBBQ/5.jpg';
Picture[80] = 'http://faithcashdollar.com/Photos/HopesBBQ/4.jpg';
Picture[81] = 'http://faithcashdollar.com/Photos/HopesBBQ/3.jpg';
Picture[82] = 'http://faithcashdollar.com/Photos/HopesBBQ/2.jpg';
Picture[83] = 'http://faithcashdollar.com/Photos/HopesBBQ/1.jpg';


// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++)
{
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];
}


var picwidth = new Array();
var picheight = new Array();
$max=422;
for(iss = 1; iss < pss+1; iss++)
{
    picwidth[iss] = preLoad[iss].width;
    picheight[iss] = preLoad[iss].height;
    
    if(picwidth[iss]/picheight[iss] >= 1)
    {
        $ratio = picwidth[iss]/$max;
        $h = Math.ceil(picheight[iss]/$ratio);
        picwidth[iss] = "422";
        picheight[iss] = $h;
    }
    else
    {
        $ratio = picheight[iss]/$max;
        $w = Math.ceil(picwidth[iss]/$ratio);
        picwidth[iss] = $w;
        picheight[iss] = "422";
    }
}




var counter = 1;
SlideShowSpeed = 500;
function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
if(counter <= 10)
{
SlideShowSpeed = SlideShowSpeed - 45;
}
counter++;
document.images.PictureBox.src = preLoad[jss].src;
document.getElementById("PictureBox").width = picwidth[jss];
document.getElementById("PictureBox").height = picheight[jss];
if (document.getElementById)
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss < (pss)) tss = setTimeout('runSlideShow()', SlideShowSpeed);
else
alert("woah!");
}

</script>

</head>

<!--
Add the onload=runSlideShow() event call to the body tag.
//-->

<body bgcolor=#000000>

<!--
The following table holds the images and captions.
Place the table in your page where you want the slideshow
to appear.  Follow the instructions for each table cell.
//-->


    <!--
    The next table cell holds the images.
    Set cell and image width and height the same.
    The img src must have name=PictureBox in its
    tag.  Usually the first image in the Picture
    array in the script is used here.
    //-->
    <div style="width:1000px; margin:0 auto;text-align:center;">
    <img src="http://faithcashdollar.com/Photos/HopesBBQ/1.jpg" name="PictureBox" Id="PictureBox" style="max-height:422px;">
    <br><br>
    <A HREF="javascript:void(0)" onclick="runSlideShow()">
Get a welcome message</A>

    </div>


</body>

</html>

**frost** · 07-17-2008, 10:39 PM

I ran the script, and it takes me 20 seconds to load everything, a total of 18 MB, according to Firebug. 18 MB is a LOT of data to be sending for a single webpage and all of the pictures you have. Most people can't download at 1 MB/s, so the real time is going to be 30 - 60 seconds like you had, if they have broadband. If a visitor has dialup, they have no hope of viewing your site, as it stands now.

What you could do though is to resize each photo to make a thumbnail out so that you have a smaller photo that uses less bandwidth. If your users want to see a larger version or better quality photo, you could add a link on the image that loads the full version of the photo.

As for the test, I did click the link after the page finished loading, but all it gave me was an alert that said "woah!" If you plan any future tests, it's better if you provide a link that would be quicker and safer for us than running it locally.

**kbfirebreather** · 07-24-2008, 07:39 PM

Thanks for testing it out for me. after tinkering around for the past few weeks with this...I've come to the conclusion that...

I don't think javascript can perform how I want in this situation.

few things.....the whole preload= new Image() thing....how does that exactly work? Does it put the image into cache for later use? If I go from index.php to photos.php, will those preloaded images from index.php carry over?

I've been trying multiple ways to load the images and then they can be used for later, but I've noticed....even well after the images have been pre-loaded, the image reel function doesn't act consitently. sometimes it shows the first picture, and that's it, sometimes it shows a few pictures, and then gets to the end, sometimes it doesn't even run at all!

I thought...maybe I'm using too many pictures? I had 80, and it kinda worked, so I took it to 50. But I have the same issue.

Any suggestions?

**wayfarer07** · 07-25-2008, 10:42 AM

Here is a good way to preload images without the use of JavaScript:
CSS

Code:

#preload img {
position: absolute;
left: -9999px;
}

HTML Code:

<div id="preload">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>

All this does is place a bunch of images off screen, where they are loaded, and thus cached. I sometimes do this as a quick and dirty way of making images available for later.

**kbfirebreather** · 07-25-2008, 02:59 PM

And that would then mean if I apply the same image url to a different img tag visible on the screen, it would know the image already? Then you think the javascript will perform a little better?

Also I seem to notice....IE runs javascript better? I ran my script on both IE7 and FF3 and IE7 always does it better.

**wayfarer07** · 03:15 PM

Yes, it would know the image already. I have tested out this method, and it works in all of the major browsers.

In general, Firefox has the best JavaScript, IE is second, Safari third, though I suspect Safari will overtake IE.

There are some instances I've found where IE is faster than Firefox, such as some types of animation, especially over opaque surfaces, which Firefox doesn't like for some reason.

Although Microsoft has pumped a lot of bugs into the web, they have also made some very good contributions to JavaScript.