当页面加载时，图像加载的可见性值是否会设置为隐藏？

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页面中我有一个可见性被设置为隐藏的图像。我有一个按钮,在点击时使用javascript将图像的可见性属性设置为visbile。加载页面时,图像会加载,或者单击按钮时加载图像。同样我想知道display值设置为none的display属性。提前致谢。

5 个解决方案

#1

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.

如果您不希望加载图像并且只想在按下按钮时开始加载,那么一个很好的技巧就是将IMG src属性设置为“data:”或“about:blank”并且然后在按钮点击上更改它。这样你就会“欺骗”浏览器,它不会在页面加载时加载图像。

Hope this helps

希望这可以帮助

#2

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

页面加载时,图像将被加载并将被隐藏。在您的按钮中单击其样式属性变为显示意味着可见。

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

如果将样式设置为display:none;它将被隐藏;

#3

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.

只要img标记在DOM中,它就会加载资源; CSS将确定它是否实际显示。你是否使用可见性:隐藏;或显示:无;不会影响这一点。

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.

主要区别在于图像是否占据页面上的任何空间;一个元素设置为display:none;根本不渲染,而元素设置为visibility:hidden;仍将占据其盒子模型设置的空间。

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

你可以在这里看到这个:http://jsfiddle.net/d8NrK/

#4

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

更好的方法是使用CSS的display属性来控制可见性和占用的空间。

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

or use jquery to simplify the code.

或使用jquery来简化代码。

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

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

或者使用$('#elementId')。toggle();

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

#5

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

浏览器加载所有具有src属性的图像。因此使用data-src。这是你可以做的

<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

我的代码就在这里

#1