loading a image to a web page asynchronously using JavaScript

Question

Is there a way to load an image specified in the src attribute of image tag in an html asynchronously?

My ultimate aim is to hit a java class through a image src tag. I want that to be asynchronously without disturbing current functionality of the web page.

How can this be done?

Whoever voted this question down did so unjustly. There is nothing wrong with asking how to do something that is impossible. — Jacklynn
– Jacklynn, Commented Dec 19, 2012 at 1:15

jfriend00 · Accepted Answer · 2012-02-20 18:40:27Z

2

All images are loaded asychronously. If the <img> tag with src attribute specified is present in the initial HTML of the page, it will start loading immediately as the page's HTML is parsed and loaded.

If you want to control when it starts to load, then you cannot specify the img URL in the HTML of the page.

For example, this javascript will load an img asychronously when you call this function and it will call your callback when it's successfully loaded:

function createImg(url, fn) {
    var img = new Image();
    img.onload = fn;
    img.src = url;
    return(img);
}

You can then put this image tag in your page by adding it to the page DOM if you want.

Based on your comments, it's not clear what you're really trying to do. Perhaps you really just want to issue an ajax call to your server and don't need to mess with img tags at all.

answered Feb 20, 2012 at 18:40

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

neo Over a year ago

Instead of using AJAX i was trying with IMG tag, where i was trying IMF src can make a call similar to AJAX in some mean of scripting with out using JS frameworks :) And now I think going with AJAX is safe way.

David Hellsing · Accepted Answer · 2012-02-20 18:36:45Z

1

Any IMG tag with a src attribute will load immediately when the page is requested.

You can put the source in a data attribute instead if you want to control how and when the image should be requested.

answered Feb 20, 2012 at 18:36

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

1 Comment

neo Over a year ago

Yeah IMG tag will load when the page is rendering that i understood but wat i am trying is to use a IMG src attribute to hit a java class by a URL. in that case i dont want the page to wait till the java class do its own functionality king of AJAX function

Collectives™ on Stack Overflow

loading a image to a web page asynchronously using JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related