I am new to javascript. I would like to know how the loading works. Suppose in my html page I have an image whose visibility is set as hidden. I have an button which on click sets the visibility property of the image to visbile using javascript. When the page is loaded will the image load or will it load when the button is clicked.
Similiarly I would like to know about the display property whose value is set as none.
Thanks in advance.

I am new to javascript. I would like to know how the loading works. Suppose in my html page I have an image whose visibility is set as hidden. I have an button which on click sets the visibility property of the image to visbile using javascript. When the page is loaded will the image load or will it load when the button is clicked.
Similiarly I would like to know about the display property whose value is set as none.
Thanks in advance.

• javascript
• html
• css

5 Answers 5

In both scenarios the images will be loaded (regardless if you can see or not the image due to visibility or display). The difference between visibility and display is basically on the "space" the element will occupy in the page. With visibility the element will keep that space even if it is hidden. With display the element will not keep the space, other elements will be able to occupy that space.

If you DON'T want the image to be loaded and you want to start loading only when the button is getting pressed then a nice trick to do that is to set the IMG src attribute to "data:" or "about:blank" and then change it on the button click. This way you will "trick" the browser and it will not load the image on page load.

Hope this helps

When page load, image will be loaded and will be hidden. In your button click its style property bee show means visible.

If you set style to display:none; it will be hidden;

As long as the img tag is in the DOM, it will load the resource; the CSS will determine whether or not it is actually displayed. Whether or not you're using visibility: hidden; or display:none; will not affect this.

The main difference is whether or not the image will occupy any space on the page; an element set to display: none; is not rendered at all, whereas an element set to visibility: hidden; will still occupy the space set by its box model.

You can see this in action here: http://jsfiddle/d8NrK/

The better is to use the display property of the CSS to control the visibility and the space it occupies.

document.getElementById( 'elemtId' ).style.display = 'none';

or use jquery to simplify the code.

 $("#elementId").hide();
 $("#elementId").show();

or use $('#elementId').toggle();

Ref:- http://www.w3schools./jquery/jquery_hide_show.asp

The browser loads all the images who has src attribute.so use data-src. Here is what you can do

<img class="hidden" data-src="url/to/image.jpg" />
(function($){
$.fn.reveal = function(){
    var args = Array.prototype.slice.call(arguments);
    return this.each(function(){
        var img = $(this),
            src = img.data("src");
        src && img.attr("src", src).load(function(){
            img[args[0]||"show"].apply(img, args.splice(1));
        });
    });
}
})(jQuery);

Now call this function when you need it.

Refrence to my code is here