3

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.

Alexander
  • 23,432
  • 11
  • 63
  • 73
Hazel
  • 63
  • 2
  • 4
  • 10
  • Changing the `src` attribute doesn't 'unload' the image resource — it just removes its binding to that `` element. Why can't you change the `display` or `visibility`? – Barney Feb 21 '13 at 18:33
  • Because it's an animated one, and animation plays only on loading the image hence I need load and unloading only, display and visibility useless in my case, and I again need to load it on certain click events hence I cannot completely remove it using the remove() method too... :( please help me out for this – Hazel Feb 21 '13 at 18:36
  • 3
    I hope, `$("id")` is a typo (notice the missing `#`) – Alexander Feb 21 '13 at 18:42
  • Dude your requirements are not clear at all... not sure what you are trying to achieve. We can't help you until you define what 'unload' mean to you. – Blacksad Feb 21 '13 at 18:46
  • @Hazel 'unloading' is not something you can achieve with images, but I don't think you really want to 'unload' it. It sounds more like you're trying to hide it or remove it, but you have to keep it around for certain reasons (or re-instate it later). This is all guesswork on my part. Maybe if you explained your situation in a bit more detail, we could suggest alternatives. For example, what does animating while loading have to do with anything? Sounds crucial, but you completely left it out of your original question. – Barney Feb 21 '13 at 18:54

4 Answers4

12

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

Floern
  • 33,559
  • 24
  • 104
  • 119
Summved Jain
  • 872
  • 2
  • 18
  • 21
0

Just remove the element using ID:

$("#id").remove();
Prakash Pazhanisamy
  • 997
  • 1
  • 15
  • 25
Blacksad
  • 14,906
  • 15
  • 70
  • 81
0

The browser does not register any change. So passing random function will force the browser to make changes in the DOM. Below is the jquery and HTML used

$('#uploaded_image').attr('src',data+'?'+Math.random());

<img src="logo.png?1576573831" class="NO-CACHE img-responsive p-b-10" id="uploaded_image">
Jaswinder Singh
  • 21
  • 1
0
document.getElementById("ImgID").style.display = "none";
document.getElementById("ImgID").removeAttribute('src');

... ... ... ...

document.getElementById("ImgID").src = NewSrc;
document.getElementById("ImgID").style.display = "initial";
Hkachhia
  • 4,463
  • 6
  • 41
  • 76
user7807205
  • 1
  • 2
  • I doubt that this helps, or even works at all. To convince be otherwise, please explain how this works and why it is supposed to solve the problem. – Yunnosch Mar 29 '20 at 05:36