Swap image src with jQuery Ajax request

javascript jquery ajax preloading image-preloader
Mark Ursino picture Mark Ursino · Jul 16, 2009 · Viewed 9.4k times · Source

I have an <img src="..." /> tag with a default src set. I'd like to have jQuery make an ajax request to get another image and when this new image is fully loaded, set the src of the <img ... /> tag so there's no flicker. I'd prefer not to do any of the preloaders like new Image().src="foo" etc. I'd really like the iamges to load on an ajax request. Any ideas?

Answer

thethanghn picture thethanghn · Jul 16, 2009

You cannot load "a part" of a image onto the webpage so you cannot load it incrementally.

The image can be loaded by using a CSS class point to an image or using Image object of Javascript.

Since CSS cannot notify the page whether the image fully load so the approach new Images().src = "foo" is the best it can do.

Attach an event to it and "decorate" it to reduce flicker with FX effect: fade in, ....

Related questions

jQuery AJAX submit form

I have a form with name orderproductForm and an undefined number of inputs. I want to do some kind of jQuery.get or ajax or anything like that that would call a page through Ajax, and send along all the …

Read More
How do I return the response from an asynchronous call?

I have a function foo which makes an asynchronous request. How can I return the response/result from foo? I tried returning the value from the callback, as well as assigning the result to a local variable inside the function …

Read More
jQuery Ajax File Upload

Can I use the following jQuery code to perform file upload using POST method of an ajax request ? $.ajax({ type: "POST", timeout: 50000, url: url, data: dataString, success: function (data) { alert('success'); return false; } }); If it is possible, do I need …

Read More