473,226 Members | 1,648 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

Changing image src, is it a synchronous operation?

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
Aug 25 '08 #1
7 7043


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
Aug 26 '08 #2
On Aug 25, 11:32 pm, Thiago Macedo <thiago.ch...@gmail.comwrote:
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.
Aug 26 '08 #3
Trastabuga wrote:
On Aug 25, 11:32 pm, Thiago Macedo <thiago.ch...@gmail.comwrote:
>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>
Aug 26 '08 #4
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
Aug 26 '08 #5
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
Aug 26 '08 #6
On Aug 26, 7:04 am, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
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!
Aug 26 '08 #7
On Aug 26, 6:41 am, Thomas 'PointedEars' Lahn <PointedE...@web.de>
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.
Aug 26 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Lazarus Plath | last post by:
I've made a gallery that has thumbnails along the top and clicking them changes the source for the full size image below, but it seems I can't change the image size. A workaround I made up is to...
1
by: Chris | last post by:
Hi. I have a ibrary I'm trying to use via javascript within IE. This library uses an asynchronous model where I call into a function and pass it a callback function as one of its arguments. My...
9
by: David | last post by:
Hello I'm testing the XMLHttpRequest object in Firefox and IE. The code below works well in IE and Firefox. It shows "1" when the string is a number and "0" when not. The page aspxTest.aspx only...
3
by: Al | last post by:
Hi, I believe that when an event is Raised is C#, it is performed synchronously, as a value is returned by the event handler, even if that value is NULL. However, as VB does not have the ability...
4
by: Ryan Liu | last post by:
TcpClient has a method called GetworkStream GetStream(); So in other words, there is only one stream associate with it for input and output, right? So while it is receiving, it can not send, and...
1
by: automation | last post by:
I have a web-page consisting of a listbox & image buttons. I want to post to the appropriate PHP script based on which list_item and image button combination is selected, where the logic is...
5
by: Navin Mishra | last post by:
Hi, In load test of our .NET 2.0 socket application on Win2003 server, we are seeing sometimes WSEWOULDBLOCK error when sending data to clients. We are using synchronoous scokets with...
1
by: rsteph | last post by:
I've got some product information pages, with images and text, all setup within a table. I'm trying to add a small image in the upper right hand corner of the content div (where all the important...
6
by: Martin Slater | last post by:
Hi all, I'm using a webbrowser control within an application for the UI and want to hide the flicker and redraw when changing pages. Ideally I want to render the new page to a seperate...
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.