7

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

4

5 回答 5

9

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

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

希望这可以帮助

于 2013-09-12T06:48:03.860 回答
1

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

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

于 2013-09-12T06:45:11.350 回答
0

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

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

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

于 2013-09-12T06:52:05.023 回答
0

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

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

或者使用 jquery 来简化代码。

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

或使用 $('#elementId').toggle();

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

于 2013-09-12T06:54:33.757 回答
0

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

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

参考我的代码在这里

于 2015-11-10T05:05:27.063 回答