help with preloading

@cyberchimpNov 21.2002

The homepage of my site – ~~[URL=http://www.researchatleeds.co.uk/ ]~~http://www.researchatleeds.co.uk/ [/URL] – uses a fairly simple javascript to swap eight sets of images. So that there is no delay when the images change, I’ve attempted to preload all the images. However, the preload ~~[I]~~seems[/I] not to be working – when I view the page there tends to be a series of delays whilst each of the images change, at least until the whole cycle has been completed for the first time. Can anyone help?
Many thanks
CyberChimp

to post a comment

JavaScript

15 Comments(s) _↴

@cyberchimpauthorNov 21.2002 — #This is the full script used in the HEAD of the page:

<SCRIPT>

var imgAry = new Array();

imgAry[0] = new Array();

imgAry[0][0] = "i1";

imgAry[0][1] = new Array("thumbs/21.jpg","thumbs/22.jpg","thumbs/01.gif","thumbs/24.jpg");

imgAry[0][2] = 0;

imgAry[0][3] = null;

imgAry[1] = new Array();

imgAry[1][0] = "i2";

imgAry[1][1] = new Array("thumbs/01.gif","thumbs/23.jpg","thumbs/19.gif","thumbs/20.gif");

imgAry[1][2] = 0;

imgAry[1][3] = null;

imgAry[2] = new Array();

imgAry[2][0] = "i3";

imgAry[2][1] = new Array("thumbs/25.jpg","thumbs/26.jpg","thumbs/01.gif","thumbs/27.jpg");

imgAry[2][2] = 0;

imgAry[2][3] = null;

imgAry[3] = new Array();

imgAry[3][0] = "i4";

imgAry[3][1] = new Array("thumbs/05.jpg","thumbs/01.gif","thumbs/28.jpg","thumbs/29.jpg");

imgAry[3][2] = 0;

imgAry[3][3] = null;

imgAry[4] = new Array();

imgAry[4][0] = "i5";

imgAry[4][1] = new Array("thumbs/37.jpg","thumbs/07.jpg","thumbs/01.gif","thumbs/09.jpg");

imgAry[4][2] = 0;

imgAry[4][3] = null;

imgAry[5] = new Array();

imgAry[5][0] = "i6";

imgAry[5][1] = new Array("thumbs/44.jpg","thumbs/45.jpg","thumbs/42.jpg","thumbs/01.gif");

imgAry[5][2] = 0;

imgAry[5][3] = null;

imgAry[6] = new Array();

imgAry[6][0] = "i7";

imgAry[6][1] = new Array("thumbs/01.gif","thumbs/08.jpg","thumbs/13.jpg","thumbs/36.jpg");

imgAry[6][2] = 0;

imgAry[6][3] = null;

imgAry[7] = new Array();

imgAry[7][0] = "i8";

imgAry[7][1] = new Array("thumbs/01.gif","thumbs/40.jpg","thumbs/39.jpg","thumbs/38.jpg");

imgAry[7][2] = 0;

imgAry[7][3] = null;

var preload = new Array();

var k = 0;

for (var j=0; j<=1; j++) {

for (var i in imgAry[j][1]) {

preload[k] = new Image();

preload[k++].src = imgAry[j][1][i];}

}

function swap(it) {

document[imgAry[it][0]].src = imgAry[it][1][(imgAry[it][2]++) % imgAry[it][1].length];

imgAry[it][3] = setTimeout("swap(" + it + ")", 8000);

}

function start() {

imgAry[0][3] = setTimeout("swap(0)", 1000);

imgAry[1][3] = setTimeout("swap(1)", 2000);

imgAry[2][3] = setTimeout("swap(2)", 3000);

imgAry[3][3] = setTimeout("swap(3)", 4000);

imgAry[4][3] = setTimeout("swap(4)", 5000);

imgAry[5][3] = setTimeout("swap(5)", 6000);

imgAry[6][3] = setTimeout("swap(6)", 7000);

imgAry[7][3] = setTimeout("swap(7)", 8000);

}

</SCRIPT>

As you can see, the preload section takes advantage of the image swap section. So what have I missed?

Many thanks, as ever

:¬)

PS What happened to the Forum? Where are all the old posts?

@Zach_ElfersNov 21.2002 — #I use a different a more simplar script.

<script language="JavaScript">

imagename = new Image(image width, image height);

imagename.src = imagesrc;

</script>

Just keep repeating that for each image you have.

@cyberchimpauthorNov 25.2002 — #Thanks Zach - ordinarily I'd use a similar script, but here there are quite a few images to preload, and so I'm keen to reduce the download time as far as possible.

Thanks Dave - I (now) understand the problem here, and also the principle of your solution. Unfortunately, even with your dummy page, I'm not up to coding these two functions to work with my images and page. Is there any (simpler) workaround, perhaps?

PS If they didn't know how, they should have...well, posted on a forum! (All those gems of wisdom, lost forever...its criminal.)

@cyberchimpauthorNov 26.2002 — #Its not possible to do the preloads on a previous page since the image swapping is all on the initial page of the site, and I'd definitely like to preload if at all possible.

So, does anyone feel up to (Dave's) challenge? The URL of the page in question is:

http://www.researchatleeds.co.uk/

I would be eternally grateful if anyone DID have a stab at it...

:¬)

@cyberchimpauthorNov 29.2002 — #Another solution to this problem has occurred to me. I think I am right in saying that, at the moment, the preload script preloads all four of the images that make up i1 first, then the four images that make up i2, then all of i3, etc. Whereas in fact it would make much more sense to preload the first image of i1, then the first image of i2, then the first of i3, etc, and not preload the second image of i1 until all the first images have been preloaded, since this is the order in which the images are actually displayed. And though I'm not up to it myself, this should require only a small tweak to the existing script, rather than a whole new function. Am I right?

PS Dave, did you get my email at your consulting site?

@MrgSkierNov 29.2002 — #I'm having a similar problem, but the funny thing is it doesn't seem to happen with NS7. Cyberchimp, i looked at your site with IE6 and left the home page open for about 10 minutes, enough time to pre-load w/ a dsl connection right? Well IE6 was sending requests every couple seconds as long as the page was open. Tried your site with NS7 and network activity stopped after about a minute.

I'm just trying to get a simple slideshow working on IE6, here is my latest attempt:

http://webcam.voigtnet.com/MRGSlideShow.html

Again, this works fine on NS7 once all the images are downloaded.

The javascript is from:

http://www.csicop.org/~fitz/www/slideshow/slideshow.js

@cyberchimpauthorDec 01.2002 — #Thanks for taking a look, MrgSkier. I've tried your suggestion, but I get the same problem with my site whether I'm using IE5.5 or NN7. It SOUNDS like (your copy of?) IE is forcing each image to download afresh every time it is required. You used to be able to set this to happen at

Tools > Internet Options... > General > Temporary Internet Files > Settings...

though I'm not sure whether this is still the case - all the options I have now look uproblematic. What setting do you have here (I have the default 'Automatic' setting).

Regarding your slideshow: here I exerience exactly the same problem as you. With NN7 the images all preload happily enough, and then display as soon as I hit the Next button. With IE5.5 though each image has to download EVERY time I hit the Next button. I'm afraid I wouldn't know where to start here - Dave is probably your man...

@smallmuscleshirDec 02.2002 — #It would seem that one of two or more things could help you with this problem...

some of those teeny tiny 45 x 45 pics were upto 5.5k and were actually 95 x 95!

need to compress those pics with, as i've found to be the best, macromedia fireworks. i bet you could get the download time/filesize down to 1/3 of the current, if you size them to 45px maybe more.

Not to sound like an advocate, but it would work well, maybe if you put those pics and coding into a flash (*.swf) file you could loop the whole as though it were an animated gif--with a very small footprint.

@cyberchimpauthorDec 02.2002 — #Thanks very much for taking a look, smallmuscleshir, and for taking the effort to examine the images and code. In fact ALL those images that display at 45 x 45 on the index page (and in the 'Gallery Credits' page) are actually 95 x 95. There are two reasons for this:

(1) They are displayed full size elsewhere on the site (in the 'Revolving Gallery' at the top of each page). By preloading (some of) them here (and 'preloading' all of them on the 'Gallery Credits' page) I'm able to speed up the download of subsequent pages in the site.

(2) There are 60 plus of these images in total (and rising) and I wanted to be able easily to change the images used in the 'animations' on the index page so that different artists can be 'showcased' from time to time.

I did ponder for some while whether this was the best way to proceed - I know that I COULD have made two different images (with different dimensions) for each piece of artwork, but overall this seemed like a less 'cost effective' method in terms of download times. What do you think?

The second point I mention above is also one of the reasons that I wanted to avoid Flash on this particular site. (The other is that the site is principally for academics, and I know from experience that many are using relatively old browsers that don't have Flash of any sort installed).

All images have been crushed ferociously using ImageReady - I'd be interested to hear how you found Fireworks and ImageReady to compare, in terms of image-crushing.

Thanks again for checking out the site.

@cyberchimpauthorDec 07.2002 — #So does it look to anyone like it would be possible to preload my images in a different order (the order in which they are actually displayed), so that I could get all the images to display instantly when called? It seems like this would be a solution (see the 9th posting in this thread above), but my javascripting isn't up to it.

PS Dave, did you get my email to your Consulting site?

@smallmuscleshirJan 07.2003 — #I copied one pic and simply opening it in mspaint took off some of the bandwidth girth, but then the third pic is using fireworks and sized it to a tiny 1.15k from the initial 2.53k. depending on just how you code it it could cut your time in half for the preload.<br><img src="http://www.smallmuscleshirt.com/example/your32.jpg"><br><img src="http://www.smallmuscleshirt.com/example/mspaint.jpg"><br><img src="http://www.smallmuscleshirt.com/example/macromediafireworks.jpg">

@smallmuscleshirJan 07.2003 — #oh yeah, if you can cut the times for those 95x95's down like that... the the pics would be measurable in bytes rather than kilobytes after being cut down to 45x45 and you could make a layer positioned at say top=(-10000px),left=(-10000px) to still maintain your original plan of preloading your 95x95's only they won't hinder your primary pages performance because it could be in a frame, iframe, the divider could be dead last on the page etc....

kinda got wordy

@cyberchimpauthorJan 07.2003 — #Thanks for taking the time to experiment with my images, smallmuscleshir (though I'm afraid I was unable to actually access your efforts - the server seemed to be down when I tried). Rather than reduce the images in size (both in terms of weight and dimensions) I've attempted to preload them during the 'intervals' between each image swap (which, as it turns out, is more than enough even at their current bloated size). The latest version (still getting tweaked) is up now.

Have you found Fireworks to be more effective at crushing images than Image Ready? I'm never sure which to use...

@smallmuscleshirJan 17.2003 — #anything to keep away from updating scripts is a pleasure! Yeah, in short, I find that fireworks alog. seems to do a better job compressing the file size and you have an almost unlimited number of variables that you can play with for what size/quality ratio your looking for. Of course the bigger the picture the more dramatic/impressive the difference in the compression alog. becomes... and you can also create you animated gifs with always on top layers as oposed to the usual base image that gets sheided by the new layer, good program! I'll try to post these pics here, however they are still on my server as well.

your original @ 2.53k

[IMG]http://www.smallmuscleshirt.com/example/your32.jpg[/IMG]

just by opening in mspaint and pushing save trimmed a few hundredths off?!?!?!?!

[IMG]http://www.smallmuscleshirt.com/example/mspaint.jpg[/IMG]

with fireworks @ 1.15k

[IMG]http://www.smallmuscleshirt.com/example/macromediafireworks.jpg[/IMG] - you can see a slight blur on it because I didn't really take the time to reset the smoothing, loss, or edging distortions. However since your are all the same size, if you did one to liking, you could batch the rest with that setting...

<br><br>Good Luck!

P.S. I'm having a li' trouble with about 250 pics on time for my message boards posting section, any ideas on format that could help? http://smallmuscleshirt.community.everyone.net[br][br] or directly (may) work but usually my cookies block back door entrance http://smallmuscleshirt.community.everyone.net/community/scripts/postMessage.pl

@cyberchimpauthorJan 18.2003 — #Erm, sorry, I'm not sure what you're after here. If you need any kind of help with a design issue I'd be pleased to help, though if its a coding matter I'm not really your man - you'd be better starting a new thread.

Also in #JavaScript _↴

Setting event function for all elements of the same type?Array has string subscript? Comes up blank.Check control of radiobutton

Success!

Help @cyberchimp spread the word by sharing this article on Twitter...

Tweet This

help with preloading

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

help with preloading

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴