Changing image src, is it a synchronous operation?

[Trastabuga]

I have a simple task:
I need to change image src on the fly and then get its new width and
height;

var url = "/some/request";
var img = document.getElementById('my_img');
var old_width = img.width;
img.src = url; // or img.setAttribute('src', url);
//Now in browser I got a new picture
var new_width = img.width;
alert(new_width-old_width);

For some reason I get "0" in both FF and IE. Does it mean that
changing image source is an asynchronous procedure? If it's so can I
make it synchronous or get a callback on completion?
Any ideas how to get new width in the same function?

Thank you!
Andrew

[Thiago Macedo]

Trastabuga wrote:

For some reason I get "0" in both FF and IE. Does it mean that
changing image source is an asynchronous procedure? If it's so can I
make it synchronous or get a callback on completion?
Any ideas how to get new width in the same function?

Hi,

Yes, its an asynchronous proc.
You can implement callback functions for the onReadyStateChange event
of the image.
If my memory isn't wrong, img.onReadyStateChange = function
{alert(img.readyState)};

Thiago

[Trastabuga]

On Aug 25, 11:32 pm, Thiago Macedo <[e-mail]:

Trastabuga wrote:

For some reason I get "0" in both FF and IE. Does it mean that
changing image source is an asynchronous procedure? If it's so can I
make it synchronous or get a callback on completion?
Any ideas how to get new width in the same function?

Hi,

Yes, its an asynchronous proc.
You can implement callback functions for the onReadyStateChange event
of the image.
If my memory isn't wrong, img.onReadyStateChange = function
{alert(img.readyState)};

Thiago

Thank you, Thiago.
For some reason it only works in IE for me. FF just ignores it.

[Thomas 'PointedEars' Lahn]

Trastabuga wrote:

On Aug 25, 11:32 pm, Thiago Macedo <[e-mail]:

>You can implement callback functions for the onReadyStateChange event
of the image.
If my memory isn't wrong, img.onReadyStateChange = function
{alert(img.readyState)};
[...]

[...]
For some reason it only works in IE for me. FF just ignores it.

It is rather surprising it works at all; are you sure about that? For it
should be `onreadystatechange', ECMAScript implementations are
case-sensitive. However, it is not surprising that Firefox would ignore
that; this property is MSHTML-proprietary, it has been implemented by Gecko
only with XHR as it is also part of MSXML from which this particular
interface originates.

Since JavaScript 1.1, Netscape 2.0, Image objects have an `onload' event
handler property that can be used. Unsurprisingly, it is also supported by
the MSHTML DOM. So you should use

// add feature tests here
var img = new Image();

img.onload = function() {
// ...
};

img.src = "...";

The very same question has been asked and answered (by me) two days ago.
Please search before you post. After all, you are using Google Groups for
posting, so doing a little research before bothering people with old
problems should not be too hard.

<http://jibbering.com/faq/>
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

Since JavaScript 1.1, Netscape 2.0, Image objects have an `onload' event

^^^^^^^^^^^^

handler property that can be used. [...]

Should read "Netscape 3.0". (JavaScript was introduced with Netscape 2.0.)

The very same question has been asked and answered (by me) two days ago.
Please search before you post. After all, you are using Google Groups for
posting, so doing a little research before bothering people with old

^^^^^^^^^^^^^^^^

problems should not be too hard.

Should read "... instead of bothering ...".
PointedEars

[SAM]

Trastabuga a écrit :

I have a simple task:
I need to change image src on the fly and then get its new width and
height;

Why to use Ajax for it (that browsers can make for the last century)

It is absolutly simple to do
(just notifying visitor he has to wait the new image)
don't give height nor width nor sizes styles to your image

<html>
<img name="here" src="1.jpg">
<a href="javascript:document.here.src='2.jpg'>image 2</a>
</html>

var url = "/some/request";
var img = document.getElementById('my_img');

img.onload = function() { this.style.width = this.width+'px';};
// (not working with all browsers)

var old_width = img.width;
img.src = url; // or img.setAttribute('src', url);
//Now in browser I got a new picture

no, you have to wait it's complete loading !

var new_width = img.width;
alert(new_width-old_width);

--
sm

[Trastabuga]

On Aug 26, 7:04 am, SAM <[e-mail]>
wrote:

Trastabuga a écrit :

I have a simple task:
I need to change image src on the fly and then get its new width and
height;

Why to use Ajax for it (that browsers can make for the last century)

It is absolutly simple to do
(just notifying visitor he has to wait the new image)
don't give height nor width nor sizes styles to your image

<html>
<img name="here" src="1.jpg">
<a href="javascript:document.here.src='2.jpg'>image 2</a>
</html>

var url = "/some/request";
var img = document.getElementById('my_img');

img.onload = function() { this.style.width = this.width+'px';};
// (not working with all browsers)

var old_width = img.width;
img.src = url; // or img.setAttribute('src', url);
//Now in browser I got a new picture

no, you have to wait it's complete loading !

var new_width = img.width;
alert(new_width-old_width);

--
sm

Thanks, onload works!

[Trastabuga]

On Aug 26, 6:41 am, Thomas 'PointedEars' Lahn <[e-mail]>
wrote:

Thomas 'PointedEars' Lahn wrote:

Since JavaScript 1.1, Netscape 2.0, Image objects have an `onload' event

^^^^^^^^^^^^

handler property that can be used. [...]

Should read "Netscape 3.0". (JavaScript was introduced with Netscape 2.0.)

The very same question has been asked and answered (by me) two days ago.
Please search before you post. After all, you are using Google Groups for
posting, so doing a little research before bothering people with old

^^^^^^^^^^^^^^^^

problems should not be too hard.

Should read "... instead of bothering ...".

PointedEars

Thomas, you are right onreadystatechange only works with IE when in
lower case. I really searched the Net but couldn't find the answer,
probably used the wrong wording. Sorry to have bothered you.