Load image during executing a javascript

Printable View

08-14-2011, 05:11 AM
Tak Fujiwara

Load image during executing a javascript

Newbie here, please be kind.

Want to reload a new image during executing a javascript. How can I do this?
Attached below is my trial script (problem portion only). It's intention is to
display 111.jpg for 2 seconds, followed by 222.jpg and 333.jpg. The actual
behavior is that it displays blank.jpg for six seconds then displays 333.jpg.

I think that the
<IMG src="111.jpg" ,,,,,,,
does not take place during wait loop, as script is running.

Can any guru here help me how I can resolve this? :confused:
AdvThanksance
Tak

----- attachment -----
<html><head>
<script type="text/javascript">
function picStart() {
var a = new Array(3);
a[1]="111.JPG";
a[2]="222.JPG";
a[3]="333.JPG";
for(i=1;i<4;i++) {
document.getElementById("mainpic").src=a[i];
var time=new Date(); t=time.getTime();
do { var time=new Date();tNew=time.getTime();
// alert(tNew+" "+t);
}while(tNew-t < 2000);
}
}
</script>
</head>
<body>
<A href="javascript:picStart()">Click Start</a><br>
<IMG id="mainpic" src="blank.jpg" width="800" height="800">
</body>
</html>
--------- end attachment ------
08-14-2011, 03:27 PM
twseitex

preload and render

Hi,

run javascript f.e. load or reload an image dynamically

<script type="text/javascript">

// +++++ changeable code
var arPicFileName = new Array
(
"111.JPG",
"222.JPG",
"333.JPG"
);

var arPicWith = new Array
(
111,
222,
333
);

var arPicHeight = new Array
(
101,
202,
303
);

var intWaitingTimeAfterEveryChangeOfSrc=2000; // Milliseconds, what you want, > 0

// ++++ internal code, do not change

var intLengthOfAllPicArrays=arPicFileName.length; // must be > 0

var intCounter=0;

var arobjPreloadedPics=new Array(); // length is intLengthOfAllPicArrays

var bofuChangePicLoopAllowed=false;
var intfuChangePicLoopIndex=-1;
var intfuChangePicLoopTimeoutID=0;

var objHtmlImg;

// ----- preload pic data during loading js-file
for(intCounter=0;intCounter<intLengthOfAllPicArrays;intCounter++)
{
arobjPreloadedPics[arobjPreloadedPics]=new Image(arPicWith[intCounter],arPicHeight[intCounter]);
arobjPreloadedPics[arobjPreloadedPics].src=arPicFileName[intCounter]; // preload, string to .src
}

// ----- change pic
function fuChangePicLoop() // need objHtmlImg, endless loop till stop
// no args, all vars are global (loop should not have local vars)
{
if(bofuChangePicLoopAllowed) // false --> see fuStopChangePicLoop()
{
// next index and check
intfuChangePicLoopIndex++;
if(intfuChangePicLoopIndex>=intLengthOfAllPicArrays){intfuChangePicLoopIndex=0;}

// change objHtmlImg.src
objHtmlImg.src=arobjPreloadedPics[intfuChangePicLoopIndex].src; // preload now renders

// wait and then loop
intfuChangePicLoopTimeoutID=windows.setTimeout('fuChangePicLoop()',intWaitingTimeAfterEveryChangeOfS rc);
}
}

// ----- stop change
function fuStopChangePicLoop() // onclick too
{
// stop loop of fuChangePicLoop()
bofuChangePicLoopAllowed=false;

// clear timer of fuChangePicLoop()
if(intfuChangePicLoopTimeoutID!=0)
{window.clearTimeout(intfuChangePicLoopTimeoutID);}

// init
intfuChangePicLoopTimeoutID=0; // must be 0
intfuChangePicLoopIndex=-1; // must be -1
}

// ----- start change
function fuStartChangePicLoop(stID) // only onclick
// stID string of html element with property .src
{
fuStopChangePicLoop(); // first stop

// check ID and get html image object
if(stID!=null)
{if(stID!="")
{objHtmlImg=document.getElementById(stID) // global
if(objHtmlImg!=null)
{
bofuChangePicLoopAllowed=true;

fuChangePicLoop(); // need objHtmlImg, endless loop till stop
}
}
}
}

</script>
</head>
<body>
<a href="javascript:fuStartChangePicLoop("mainpic");">Start change of image (endless loop till stop clicked)</a><br>
<a href="javascript:fuStopChangePicLoop();">Stop change of image</a><br>

<IMG id="mainpic">
</body>
</html>
08-14-2011, 06:28 PM
Tak Fujiwara

Thanks twseitex,

Wow, there are many techniques that I do not know. Will dig in.
There seems some errors in your code, however.

Have changed:
<a href="javascript:fuStartChangePicLoop("mainpic");">
to
<a href='javascript:fuStartChangePicLoop("mainpic");'>
.
But it still does not work. fuStartChangePicLoop(stID) has an unknown error,
and the wait loop has a syntax error (do not know yet).
Will try to look into them.

Thanks anyway.
Oh, by the way, what does "javascript f.e." mean? Sorry for naive question.
Tak
08-14-2011, 09:46 PM
Tak Fujiwara

OK,
I understand all of your code. Debugged, and it is now working.
The key tecnique is setTimeout("itselt", instead of do/while loop.
Many thanks for the help.
Tak

p.s. I still have some concern about self calling function, because
it may cause stack overflow. No problem?
08-15-2011, 09:15 AM
twseitex

1 Attachment(s)

sorry for errors

Hi,

here runable code and see zip file, have fun :-)

<html>
<head>
<script type="text/javascript">

// cat Tom like a gif animation

// +++++ changeable code
var arPicFileName = new Array
(
"00.jpg",
"01.jpg",
"02.jpg",
"03.jpg",
"04.jpg",
"05.jpg",
"06.jpg",
"07.jpg",
"08.jpg",
"09.jpg"
);

var arPicWith = new Array
(
130,
130,
130,
130,
130,
130,
130,
130,
130
);

var arPicHeight = new Array
(
190,
190,
190,
190,
190,
190,
190,
190,
190
);

var intWaitingTimeAfterEveryChangeOfSrc=100; // Milliseconds, what you want, > 0

// ++++ internal code, do not change

var intLengthOfAllPicArrays=arPicFileName.length; // must be > 0

var intCounter=0;

var arobjPreloadedPics=new Array(); // length is intLengthOfAllPicArrays

var bofuChangePicLoopAllowed=false;
var intfuChangePicLoopIndex=-1;
var intfuChangePicLoopTimeoutID=0;

var objHtmlImg;

// ----- preload pic data during loading js-file
for(intCounter=0;intCounter<intLengthOfAllPicArrays;intCounter++)
{
arobjPreloadedPics[intCounter]=new Image(arPicWith[intCounter],arPicHeight[intCounter]);
arobjPreloadedPics[intCounter].src=arPicFileName[intCounter]; // preload, string to .src
}

// ----- change pic
function fuChangePicLoop() // need objHtmlImg, endless loop till stop
// no args, all vars are global (loop should not have local vars)
{
if(bofuChangePicLoopAllowed) // false --> see fuStopChangePicLoop()
{
// next index and check
intfuChangePicLoopIndex++;
if(intfuChangePicLoopIndex>=intLengthOfAllPicArrays){intfuChangePicLoopIndex=0;}

// change objHtmlImg.src
objHtmlImg.src=arobjPreloadedPics[intfuChangePicLoopIndex].src; // preload now renders

// wait and then loop
intfuChangePicLoopTimeoutID=window.setTimeout('fuChangePicLoop()',intWaitingTimeAfterEveryChangeOfSr c);
}
}

// ----- stop change
function fuStopChangePicLoop() // onclick too
{
// stop loop of fuChangePicLoop()
bofuChangePicLoopAllowed=false;

// clear timer of fuChangePicLoop()
if(intfuChangePicLoopTimeoutID!=0)
{window.clearTimeout(intfuChangePicLoopTimeoutID);}

// init
intfuChangePicLoopTimeoutID=0; // must be 0
intfuChangePicLoopIndex=-1; // must be -1
}

// ----- start change
function fuStartChangePicLoop(stID) // only onclick
// stID string of html element with property .src
{
fuStopChangePicLoop(); // first stop

// check ID and get html image object
if(stID!=null)
{if(stID!="")
{objHtmlImg=document.getElementById(stID) // global
if(objHtmlImg!=null)
{
bofuChangePicLoopAllowed=true;

fuChangePicLoop(); // need objHtmlImg, endless loop till stop
}
}
}
}
</script>
</head>
<body>
<H1>Cat Tom like a gif animation</H1>
<a href="#" onclick="fuStartChangePicLoop('mainpic');">Start running of Tom (endless loop till stop clicked)</a><br>
<a href="#" onclick="fuStopChangePicLoop();">Stop running of Tom</a><br>

<IMG id="mainpic" src="1x1.gif" alt"Cat Tom"> 
</body>
</html>
08-15-2011, 05:55 PM
Tak Fujiwara

Great,,, charming!

One problem still remain, that I could not resolve yet. This may be a javascript
limitation.

[Problem:]
Say, the original jpg width is 1000 pix, and wanted display width is 100pix.
The "arobjPreloadedPics[0]=new Image(100," does not force the display width to 100,
and displays 1000 instead.
How can I force shrink the display?

Tak
08-17-2011, 04:45 PM
twseitex

image.width or image.style.width

Hi,

f.e.

<IMG ID="idofImage" SRC="1x1pic_transparent.gif>

<script>

var real_width=100;
var real_height=200;

var scale_width=50;
var scale_height=100;

// preload
var objImage=new Image(real_width,real_height);
objImage.src="real_pic";

....

// render with new dimension
document.getelementById("idofImage").src=objImage.src;

document.getelementById("idofImage").width=scale_width;
document.getelementById("idofImage").height=scale_height;

// same document.getelementById("idofImage").style.width and document.getelementById("idofImage").style.height
</script>

Internet Explorer and style.zoom see http://msdn.microsoft.com/en-us/library/ms535169.aspx
08-18-2011, 06:58 PM
Tak Fujiwara

Thanks, twseitex.

Very much appreciated!
And, thanks for the pointer to msdn.
Tak