Changing image src, is it a synchronous operation?

T

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
 
T

Thiago Macedo

Trastabuga said:
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?
Click to expand...

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
 
T

Trastabuga

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
Click to expand...

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

Thomas 'PointedEars' Lahn

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

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

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
 
T

Thomas 'PointedEars' Lahn

Thomas said:
Since JavaScript 1.1, Netscape 2.0, Image objects have an `onload' event ^^^^^^^^^^^^
handler property that can be used. [...]
Click to expand...

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.
Click to expand...

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


PointedEars
 
S

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;
Click to expand...

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>
var url = "/some/request";
var img = document.getElementById('my_img');
Click to expand...

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
Click to expand...

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

Trastabuga

Trastabuga a écrit :


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>


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


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

Thanks, onload works!
 
T

Trastabuga

Thomas said:
Since JavaScript 1.1, Netscape 2.0, Image objects have an `onload' event
^^^^^^^^^^^^

handler property that can be used. [...]
Click to expand...

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.
Click to expand...

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

PointedEars
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

I am trying to detect Which image id="" was clicked ? 22
Only one table shows up with the information 2
PHP RSS Feed Aggregator changing to todays date everytime feed is aggregated 1
Image upload not working in browser 4
Image shifts to the right when export the page to pdf 4
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help With a Script 5
C# list/array of Images to JS 0

Members online

Total: 31 (members: 3, guests: 28)
Robots: 183

Forum statistics

Threads
473,756
Messages
2,569,540
Members
45,025
Latest member
KetoRushACVFitness

Latest Threads

Top