Resizing and caching images on the fly.

[Daz]

Hi everyone. I have a function which caches images for a slideshow once
the script has loaded. Here is an exerpt:

var base_ref = "http://www.example.com";
var images = new Array();
var tmp_images = new Array();
tmp_images[0] = "image1.jpg";
tmp_images[1] = "image2.jpg";
tmp_images[2] = "image3.jpg";
tmp_images[3] = "image4.jpg";
tmp_images[4] = "image5.jpg";

function cache_images () {
for (var i=0; i < tmp_images.length; i++){
var cacheimage=new Image();
var tmp_name = tmp_images;
var url = tmp_images + ".png";
cacheimage.src=url;
images[tmp_name]=cacheimage;
}
}

As it is, the script whizzes through the for loop, and then moves on to
the next function. The only trouble is that it moves on to the next
function whilst it's still downloading the images from the server. Is
there anyway to make the script wait until the downloading is
completed, so that I can then go on to resize the images if it's
needed?

All the best and thanks in advance.

Daz.

 

[Lich_Ray]

Image class has an old event handle "onload", bind a function to it,
the function will run when the image downloaded completely.
Like this:

img_list.onload = function () {
//do your things here
}

If you are a good programmer, you can create a class to handle it:

function ImageList () {
var args = arguments;
this.list = new Array(args.length);
for (var i = 0; i < args.length; i++) {
this.list = new Image();
this.list.onload = function () {
//load another image
}
/*
create a function to load image1
*/
}

 

[Daz]

Image class has an old event handle "onload", bind a function to it,
the function will run when the image downloaded completely.
Like this:

img_list.onload = function () {
//do your things here
}

If you are a good programmer, you can create a class to handle it:

Well, I'm not as I only started about a week ago, but I'm working
towards it.

function ImageList () {
var args = arguments;
this.list = new Array(args.length);
for (var i = 0; i < args.length; i++) {
this.list = new Image();
this.list.onload = function () {
//load another image
}
/*
create a function to load image1
*/
}

Thanks for that. Now I need to understand what it does.