Remove image dynamically using jquery by clearing the src attribute

jquery loading-image dynamic-attributes
Hazel picture Hazel · Feb 21, 2013 · Viewed 23.8k times · Source

I know one can load image dynamically using

$("#id").attr("src","path of the image"),

but to onload the certain image on certain event,

$("id").attr("src","")

doesn't work.

What's the correct way to unload the image runtime using jquery??

I cannot change the display or the visibility property of the image, I need to load an unload it.

Answer

Summved Jain picture Summved Jain · Mar 21, 2016

There are number of ways to do this. You can use the one suits you

  1. $('#id').removeAttr('src');​ // Remove the src
  2. $('#id').remove(); //This will remove the element from DOM so be careful

  3. $('#id').attr('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='); // This will change the src to a 1x1 pixel

  4. $('#id').removeAttr('src').replaceWith($image.clone()); //That worked for few people

Related questions

Adding a loading image to a jquery ajax post

i have the following javascript to post a form through ajax without refreshing the screen. Since the post take a little while, i wanted to add a loading image during processing. I see this article but it seems to only …

Read More
How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More