Question

美好的一天

问题：给予财产时

display: none;

到div，浏览器是否仍会加载其所有内容？或者只有在你展示它之后？

我想要实现的目标是将大量网页合并为一个，而不是每次都将用户引导到新页面，而只是显示与他点击的项目相关的div（在页面加载时隐藏） ..

现在我的问题是，当拥有所有这些以前在不同网页上内容的隐藏div时，它会减慢整个初始页面加载速度还是不会影响它，因为div是隐藏的而且只是加载并在调用时显示？

我的膝跳反应是浏览器加载服务器提供的所有内容，然后只是在收到css规则时隐藏div ...已经完成加载

在这种情况下，如何有效地将用户保留在一个页面上，但由于所有内容而最小化加载时间？

更新：所以我可以使用Ajax或只是jQuery来添加我不喜欢的内容;我想要最初加载吗？但是如果我使用jQuery，内容仍然需要在jQuery函数中定义，并且最初也会加载...？

这是一个场景：

HTML（初始）

<div>
inital content that I want loaded initially
<a>Action to call hidden content I don't want loaded initially<a/>
</div>

jQuery的：

$('div a').click(function(){
   $('div').append('<div>new content that I don;t want loaded initially....</div>');
});

但是，上面的新内容仍然会加载，因为它在jQuery模型中......

我在这里错了吗？

谢谢

Answer 1

如果是html页面，整个页面在发出请求时由服务器提供，然后在渲染浏览器时只需隐藏它。

如果您想延迟加载，可能需要查看AJAX technology。

使用ajax，您可以根据需要加载内容，然后将其添加到dom中。

您可以查看jQuery等提供跨平台支持表单ajax calls和dom manipulations

例如：

$.ajax({
    url: 'my-content-url',
    method: 'GET'
}).done(function(html){
    $('#my-container').html(html)
})

此示例对my-content-url进行ajax调用，成功完成后，返回的html将添加到标识为my-container的元素中。

Answer 2

对于您的问题，是的，CSS Display:none加载DOM内的所有内容。最小化加载时间的最好方法是使用AJAX。最初，不应加载隐藏的内容。当用户请求查看隐藏内容时，通过使用ajax（我更喜欢jQuery AJAX），应该加载内容。这将减少页面加载。但是，由于AJAX请求，可能会有一些加载延迟。

Answer 3

浏览器仍会下载隐藏的所有HTML。您正在做的正常模式是通过AJAX加载其他内容然后显示它。

Answer 4

当您的网页加载所有HTML内容时，即使它是隐藏的。它只是隐藏不被删除。

最好通过Ajax加载内容并将其显示在您想要显示的位置。

Answer 5

浏览器加载它们显示或不显示的所有div。如果您想快速加载您的网站，请删除不需要的div或隐藏div 来自内容

Answer 6

Css不能改变dom。以下是浏览器进程

从html构建 dom
从css

cssom

从 dom 和 cssom

因此css只能更改将在浏览器上显示的渲染树。

CSS显示：无 - 是否仍然加载DOM内的所有内容？

6 个答案: