How to create a hidden <img> in JavaScript?

Question

How to make a simple type tag <img src="a.gif">hidden programmatically using JavaScript?

Answer 1

I'm not sure I understand your question. But there are two approaches to making the image invisible ...

Pure html

<img src="a.gif" style="display: none;" />

Or...

HTML + Javascript

<script type="text/javascript">
document.getElementById("myImage").style.display = "none";
</script>

<img id="myImage" src="a.gif" />

Answer 2

What about

<img style="display: none;" src="a.gif">

This will completely disable the display and leave no placeholder.

Answer 3

javascript :

document.images['imageName'].style.visibility = hidden;

, , .

Answer 4

, Javascript. .

function loadImages(src) {
  if (document.images) {
    img1 = new Image();
    img1.src = src;
}
loadImages("image.jpg");

The image will be requested, but until you show it, it will never be displayed. Great for preloading the images that you expect from requests but delaying them until the document is loaded.

Example

Answer 5

Try setting the style to display = none:

<img src="a.gif" style="display:none">