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

Will the image load for visibility value set as hidden when the page loads?

本文关键字：是否 设置 隐藏 可见性 加载 图像      更新时间：2023-09-26

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

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

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

希望这有帮助

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

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

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

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

你可以在这里看到这个实际操作：http://jsfiddle.net/d8NrK/

更好的是使用 CSS 的显示属性来控制可见性和它占用的空间。 

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

或者使用 jQuery 来简化代码。 

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

或使用 $（'#elementId'）.toggle（）;

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

浏览器加载所有src attribute.so 使用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);

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

对我的代码的引用在这里

相关文章：