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

【问题标题】：Will the image load for visibility value set as hidden when the page loads?页面加载时，可见性值的图像加载是否设置为隐藏？
【发布时间】：2013-09-16 10:01:04
【问题描述】：

我是 JavaScript 新手。我想知道加载是如何工作的。假设在我的 html 页面中，我有一个可见性设置为隐藏的图像。我有一个按钮，点击时使用 javascript 将图像的可见性属性设置为可见。加载页面时将加载图像还是在单击按钮时加载图像。
同样，我想知道值设置为无的显示属性。
提前致谢。

【问题讨论】：

标签： javascript html css

【解决方案1】：

在这两种情况下，图像将被加载（无论您是否可以看到图像，因为可见性或显示）。可见性和显示之间的区别基本上在于元素将在页面中占据的“空间”。有了可见性，即使它被隐藏，元素也会保留该空间。使用 display 元素不会保留空间，其他元素将能够占据该空间。

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

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

只要img标签在DOM中，就会加载资源； CSS 将确定它是否实际显示。无论您使用的是visibility: hidden; 还是display:none;，都不会影响这一点。

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案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

【讨论】：