Set Img1 = Img2

[sid]

How can I load an image and then assign it to a picture ?

Example:
<Script>

ImgPre = New Image();
ImgPre.Src = "SomeImage.jpg"

// Wait till its loaded ...

imgDisplay.image = imgPre.image

</Script>

<img id="imgDisplay" >

Thanks

Sid.

 

[Pi]

Not exactly sure if this is what you want, but -

<img id="imgDisplay"/> <!--please note the ending '/' tag.
Also, best that the img tag exist before the script is called. -->
<script type="text/javascript">

//"script is all small letters, and you need the "type" attribute
ImgPre = new Image(); //'new' is small caps as well.
ImgPre.Src = "SomeImage.jpg"
ImgPre.onload=function(){
document.getElementById('imgDisplay').setAttribute('src', ImgPre.src);
}
</script>

Yeah?

 

[sid]

Yes, but why the '.src' property and not the ".image" property ?
It seems to me that you are assigning the source path of the first
image as the path of the second. I am trying to get the image to load
in the background and then when its loaded, move its image to the
second.

Thanks

Sid.

 

[Pi]

Hrmm. I dont think the Image object has an ".image" property. The way I
understand my own script is this -

First assign some space to a variable ImgPre with the 'new' statement.
Then assign where to grab the image from by assigning the source to
pull it from, ie - 'src'. Mind you, as soon as the src is given, the
browser starts to load the image "in the background" so to speak, into
the memory allocated for it.
Now, onload of the image, perform the following - take the element with
id = 'imgDisplay', and assign its src to the same as ImgPre. Now since
the image space that ImgPre.src points to is already loaded, it simply
takes it out of that memory and loads it onto the document from your
browser memory, hence doing what you asked for, ie - "get the image to
load in the background and then when its loaded, move its image to the
second."

I'm not 100% sure myself, but I think I'm right. Does the script work
as I gave it?

 

[sid]

I got the script to work, but now I have the problem that all it wants
to do is load the same jpg from cache.
Tried: imgPreLoad.src="";, but no effect.

I have seen people append a time-stamp:
src=".../image.jpg?[yymmddhhnnss]

But I am not sure how to do that in JS. What function would you use ?

Thanks

Sid.

 

[Pi]

A simple rand could do that? Making a date suffix is too much for too
little, imho.

src=".../image.jpg?" + parseInt(Math.rand()*1000);

I ask you, are you trying to load an image which has just changed but
still retains the same filename? Then the above should work, with the
browser thinking it's a different call.

I got the script to work, but now I have the problem that all it wants
to do is load the same jpg from cache.
Tried: imgPreLoad.src="";, but no effect.

I have seen people append a time-stamp:
src=".../image.jpg?[yymmddhhnnss]

But I am not sure how to do that in JS. What function would you use ?

Thanks

Sid.

Hrmm. I dont think the Image object has an ".image" property. The way I
understand my own script is this -

First assign some space to a variable ImgPre with the 'new' statement.
Then assign where to grab the image from by assigning the source to
pull it from, ie - 'src'. Mind you, as soon as the src is given, the
browser starts to load the image "in the background" so to speak, into
the memory allocated for it.
Now, onload of the image, perform the following - take the element with
id = 'imgDisplay', and assign its src to the same as ImgPre. Now since
the image space that ImgPre.src points to is already loaded, it simply
takes it out of that memory and loads it onto the document from your
browser memory, hence doing what you asked for, ie - "get the image to
load in the background and then when its loaded, move its image to the
second."

I'm not 100% sure myself, but I think I'm right. Does the script work
as I gave it?

 

[RobG]

A simple rand could do that? Making a date suffix is too much for too

Do what? Please don't top-post here, reply below trimmed quotes.

little, imho.

src=".../image.jpg?" + parseInt(Math.rand()*1000);

There is no Math.rand method, but there is Math.random.

The above method means there is a 1:1,000 chance that the suffix will
be the same twice in a row every time you call it. Using a date means
that for the suffix to be the same, the function must be called within
one millisecond. Even if two in a row were the same, a millisecond
later (probably less) it will change - a user is unlikely to notice
that.

As to whether new Date() uses more resources than
parseInt(Math.random()*1000, a simple test shows that it is 3 times
faster in Firefox and twice as fast in IE. It is also much less to
type - however, time to execute is utterly irrelevant anyway since
10,000 loops of the slower Math.random option takes about 100ms on a
moderately fast box. Perceived performance will be affected by other
factors to a much greater extent.


Simple test:

function t (){
var x, i=0, n=10000;
var s = new Date();
while (i++<n){
x = new Date();
}
var f = new Date() - s;
s = new Date();
i=0;
while (i++<n){
x = parseInt(Math.random()*1000);
}
alert(
'new Date: ' + f + '\n' +
'Math.random: ' + (new Date() - s)
);
}

 

[sid]

This is what I came up with: Do you think this is too much ?

src=".../image.jpg?" + TimeStamp();

function TimeStamp(){
var today=new Date();
var yy=today.getYear();
var m=today.getMonth()+1;
var d=today.getDate();
var h=today.getHours();
var n=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
d=checkTime(d);
h=checkTime(h);
n=checkTime(n);
s=checkTime(s);
//alert(yy+""+m+""+d+""+h+""+n+""+s);
return yy+""+m+""+d+""+h+""+n+""+s;
}

function checkTime(i){
if (i<10)
{i="0" + i;}
return i;
}

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

Do what? Please don't top-post here, reply below trimmed quotes.
Agreed.


There is no Math.rand method, but there is Math.random.

The above method means there is a 1:1,000 chance that the suffix will
be the same twice in a row every time you call it. Using a date means
that for the suffix to be the same, the function must be called within
one millisecond. Even if two in a row were the same, a millisecond
later (probably less) it will change - a user is unlikely to notice
that.

The resolution of a Date object is 1 ms. But the resolution of new
Date() depends on the system; the update interval can be considerably
greater.

As to whether new Date() uses more resources than
parseInt(Math.random()*1000, a simple test shows that it is 3 times
faster in Firefox and twice as fast in IE.

But he should not be using parseInt(), which requires a string argument
unless the engine is over-clever. Math.floor() is right for the job,
and |0 is probably faster still.

Both are faster than new Date(), for me.

But if Math.random() is used, it is silly to use 1000; that reduces
randomness. Use 1e15 if an integer is required, or even
Math.floor(Math.random()*Math.pow(2, 53)).

Note : if the random generator effectively uses a 53-bit seed, which I
doubt, some such arithmetic might capture *all* its bits, guaranteeing a
2^53 cycle.

Test Math.random()*Math.pow(2, 53)
Math.random()*Math.pow(2, 54)

It's a good idea to read the newsgroup and its FAQ. See below.

 

[sid]

In comp.lang.javascript message <[email protected]
glegroups.com>, Thu, 18 Jan 2007 22:40:09, RobG <[email protected]>
posted:







The resolution of a Date object is 1 ms. But the resolution of new
Date() depends on the system; the update interval can be considerably
greater.


But he should not be using parseInt(), which requires a string argument
unless the engine is over-clever. Math.floor() is right for the job,
and |0 is probably faster still.

Both are faster than new Date(), for me.

But if Math.random() is used, it is silly to use 1000; that reduces
randomness. Use 1e15 if an integer is required, or even
Math.floor(Math.random()*Math.pow(2, 53)).

Note : if the random generator effectively uses a 53-bit seed, which I
doubt, some such arithmetic might capture *all* its bits, guaranteeing a
2^53 cycle.

Test Math.random()*Math.pow(2, 53)
Math.random()*Math.pow(2, 54)

It's a good idea to read the newsgroup and its FAQ. See below.

--
(c) John Stockton, Surrey, UK. [email protected] Turnpike v6.05 IE 6
FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

This seems to work well, but I noticed that all files are kept with
'?...' in the browser cache.
I didn't think this was going to happen. Any way to prevent this ?

Sid.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

This seems to work well, but I noticed that all files are kept with
'?...' in the browser cache.
I didn't think this was going to happen. Any way to prevent this ?

It's a good idea to read the newsgroup and its FAQ. See below.

 

[sid]

In comp.lang.javascript message <[email protected]



It's a good idea to read the newsgroup and its FAQ. See below.

--
(c) John Stockton, Surrey, UK. [email protected] Turnpike v6.05 IE 6
FAQ <URL:http://www.jibbering.com/faq/index.html>.
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Thank You for the link, but I do not see an answer to my issue. FAQ
4.17 does address the issue, but does not speak about how prevent the
files from cashing.
Now, not only am I seeing the cashed files filling up the cache, but
it appears that the browser is only reading the last 5 digits of the
URL and brings up previous pages from about 12 hours ago.

Sid.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]

Thank You for the link, but I do not see an answer to my issue. FAQ
4.17 does address the issue, but does not speak about how prevent the
files from cashing.
Now, not only am I seeing the cashed files filling up the cache, but
it appears that the browser is only reading the last 5 digits of the
URL and brings up previous pages from about 12 hours ago.

Once you show signs of having understood FAQ section 2.3 in full,
including its links, you will be eligible for further consideration.

 

[sid]

In comp.lang.javascript message <[email protected]
oglegroups.com>, Tue, 6 Feb 2007 12:26:44, sid <[email protected]>
posted:







Once you show signs of having understood FAQ section 2.3 in full,
including its links, you will be eligible for further consideration.

--
(c) John Stockton, Surrey, UK. [email protected] Turnpike v6.05 IE 6.
Web <URL:http://www.merlyn.demon.co.uk/> - FAQish topics, acronyms, & links.
I find MiniTrue useful for viewing/searching/altering files, at a DOS prompt;
free, DOS/Win/UNIX, <URL:http://www.idiotsdelight.net/minitrue/>- Hide quoted text -

- Show quoted text -

I have read the links (nice page) and understand the material. I have
implemented the examples, but I continue to see the image(s) fill up
the cache. If you know of a secret method to prevent the images from
being cached, I would appreciate knowing it WITHOUT THE SARCASTIC
REMARKS ESPECIALLY COMING FROM SOMEONE WITH A DOCTORATE.