Question

我是javascript的新手。我想知道装载是如何工作的。假设在我的html页面中我有一个可见性被设置为隐藏的图像。我有一个按钮，点击时使用javascript将图像的可见性属性设置为visbile。当页面加载时，图像会加载，或者单击按钮时会加载图像。
我同样想知道显示属性，其值设置为无。
先谢谢。

Answer 1

在两种情况下，图像都将被加载（无论您是否因为可见性或显示而看到图像）。可见性和显示之间的差异基本上是元素在页面中占据的“空间”。通过可见性，元素即使被隐藏也会保留该空间。通过显示元素将不会保留空间，其他元素将能够占据该空间。

如果您不想加载图像并且只想在按下按钮时开始加载，那么一个很好的技巧就是将IMG src属性设置为“data：”或“about：空白“然后在按钮点击上更改它。通过这种方式，您将“欺骗”浏览器，并且不会在页面加载时加载图像。

希望这有帮助

Answer 2

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

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

Answer 3

只要img标签在DOM中，它就会加载资源; CSS将确定它是否实际显示。您是否使用visibility: hidden;或display:none;不会影响此。

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

您可以在此处查看此操作：http://jsfiddle.net/d8NrK/

Answer 4

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

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

或使用jquery来简化代码。

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

或使用$（'＃elementId'）。toggle（）;

参考： - http://www.w3schools.com/jquery/jquery_hide_show.asp

Answer 5

浏览器会加载具有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);

现在在需要时调用此函数。

对我的代码的尊重是here

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

5 个答案: