delayed loading of images possible in javascript?

[stan k.]

First of all let me clarify - I am not talking about having a bunch of
images loaded all at once (or preloaded) and then controlling the
display of the images after that point -- I know that can be done. I
am talking about controlling the loading of those images themselves.

I was told that the only way to do this was to dynamically write the
html code via javascript and put time delays inbetween the dynamic
creation of that html
such as:

-
function DelayedWrite(){
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage1.jpg");
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage2.jpg");
// etc . . .
}

onload = window.setTimeout('DelayedWrite()',3000);
-

What is occuring is that the initial time delay onload works but the
delays
within the function itself do not seem to do anything...

Anyone have any ideas about how this can be done? perhaps a totally
different approach even?

The reason why I need to do this is I am pulling some pretty big
images of weather maps from another site and presumably when I attempt
to load several of the maps at once, the remote server thinks it's a
Denial Of Service (dos) attack and ends up blocking the loading of any
more images.

 

[mesal]

First of all let me clarify - I am not talking about having a bunch of
images loaded all at once (or preloaded) and then controlling the
display of the images after that point -- I know that can be done. I
am talking about controlling the loading of those images themselves.

I was told that the only way to do this was to dynamically write the
html code via javascript and put time delays inbetween the dynamic
creation of that html
such as:

-
function DelayedWrite(){
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage1.jpg");
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage2.jpg");
// etc . . .
}

onload = window.setTimeout('DelayedWrite()',3000);
-

What is occuring is that the initial time delay onload works but the
delays
within the function itself do not seem to do anything...

Anyone have any ideas about how this can be done? perhaps a totally
different approach even?

The reason why I need to do this is I am pulling some pretty big
images of weather maps from another site and presumably when I attempt
to load several of the maps at once, the remote server thinks it's a
Denial Of Service (dos) attack and ends up blocking the loading of any
more images.

Hi,

try this code:

var pics = new Array('verybigimage1.jpg','verybigimage2.jpg',...);
var picNum = 0;
function DelayedWrite(picNum)
{
document.write("<img src='http://remoteurl/verybigimage" + picNum + ".jpg'");
picNum++;
if (picNum == maxPictures)
window.clearInterval(intName);
}

intName = window.setInterval('DelayedWrite()',3000);

didn't try it but I think it should work..
good luck

mesal

 

[grp_pst_363]

-
function DelayedWrite(){
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage1.jpg");
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage2.jpg");
// etc . . .
}

onload = window.setTimeout('DelayedWrite()',3000);
-

What is occuring is that the initial time delay onload works but the
delays
within the function itself do not seem to do anything...

Hi

The function DelayedWrite() executes 3s after the web page loads.

[POINT X]
Once inside the function, all of the of the image tags are written
with no perceptable delay.
Each of several timeouts call the function 3s later [GO BACK TO POINT
X IN INFINITE LOOP].

It looks like an infinite loop with lots of image tags being written
every 3 seconds. Maybe this infinite loop clogs up your browser which
may look like a Denial of Service attack.

Assuming it doesn't work just putting all the images in with plain
HTML and the server really does think this is Denial of Service...

How about having an image of the words "Please Wait" called
pleaseWait.gif

In the body for each image you add
<img name="weather" src="pleaseWait.gif">,

how about using <body onload="delayLoad();"> to call the function:

function delayLoad() {
var len = document.weather.length;
// multiple objects named "weather" put in DOM as array with length
var imageURL="";
for (var i=0; i<len; i++) {
instr="document.weather["+i+"].src='http://remoteurl/verybigimage"+i+".jpg';";
window.setTimeout(instr,(i+1)*3000);
}
}

the function assembles strings (instructions) like:
document.weather[0].src='http://remoteurl/verybigimage0.jpg';
document.weather[1].src='http://remoteurl/verybigimage1.jpg';
document.weather[2].src='http://remoteurl/verybigimage2.jpg';
document.weather[3].src='http://remoteurl/verybigimage3.jpg';
etc

and sets up timeouts to execute the instructions one by one
3,6,9,12... seconds after the page loads.

I've not tested the above code, but I think it would replace the
"Please Wait" images in sequence with 3s delay between images.

Hope that's of some use.

Mark

 

[@SM]

"stan k." a ecrit :

First of all let me clarify - I am not talking about having a bunch of
images loaded all at once (or preloaded) and then controlling the
display of the images after that point -- I know that can be done. I
am talking about controlling the loading of those images themselves.

I was told that the only way to do this was to dynamically write the
html code via javascript and put time delays inbetween the dynamic
creation of that html
such as:

setTimeout('1st_JS_function()',2000);
setTimeout('2nd_JS_function()',4000);
setTimeout('3dr_JS_function()',6000);
setTimeout('4th_JS_function()',8000);
(2 secondes is not enough for me to donwload an heavy image)

as all setTimeouts are launch together (it is what you do in DelayedWrite)
you need to increase the delay of each next called

Take care your DelayedWrite would loop !
Is there something to stop it ?

-
function DelayedWrite(){
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage1.jpg");
window.setTimeout('DelayedWrite()',3000);
document.write("<img src="http://remoteurl/verybigimage2.jpg");
// etc . . .
}

onload = window.setTimeout('DelayedWrite()',3000);
-

What is occuring is that the initial time delay onload works but the
delays
within the function itself do not seem to do anything...

(3000 = 3000 = 3000 = 3000 is not 3000+3000+3000+3000)
and redo 3 secondes after and again and again
When does the browser has a little time to draw the page ?


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:[email protected]
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************