4

再会

问题：在给予财产时

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 模型中......

我在这里错了吗？

谢谢

4

6 回答 6

3

在 html 页面的情况下，整个页面在发出请求时由服务器提供，然后在呈现浏览器时简单地隐藏它。

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

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

除了使用浏览器提供的原始 AJAX API，您还可以查看像jQuery这样的库，它提供跨平台支持表单进行ajax 调用和dom 操作

前任：

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

此示例对 ajax 进行调用，my-content-url并在成功完成后，将返回的 html 添加到具有 id 的元素中my-container。

于 2013-03-22T08:15:06.810 回答
2

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

于 2013-03-22T08:17:26.643 回答
1

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

于 2013-03-22T08:14:46.893 回答
1

当您的页面加载所有 HTML 内容时，即使它是 hide 。它只是隐藏未删除。

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

于 2013-03-22T08:17:01.013 回答
0

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

于 2013-03-22T08:18:05.693 回答
0

CSS 不能改变 dom。以下是浏览器流程

  • 从 html构造dom
  • 从 css构造cssom（css 对象模型）
  • 从dom和cssom构造渲染树

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

于 2017-07-13T10:08:15.883 回答