在HTML页面加载完成后显示内容-JavaScript中文网-JavaScript教程资源分享门户

当我们在浏览器中打开一个包含大量资源的 HTML 页面时，页面会花费一定的时间来加载这些资源。在此期间，用户可能会看到空白的页面或者只是部分已经加载的内容。为了提供更好的用户体验，我们可以使用 JavaScript 和 CSS 技术来确保页面加载完毕后再显示内容。

监听 "load" 事件

我们可以使用 window 对象的 load 事件来检查 HTML 页面是否已经加载完毕。在该事件被触发时，我们可以访问整个文档，并且所有的资源也已经完成加载。

window.addEventListener('load', function() {
  // 页面已经加载完毕
});

显示隐藏内容

当页面加载完毕时，我们可以将之前隐藏的内容显示出来。这可以通过在 CSS 中设置 display:none 属性来实现。然后，在 JavaScript 中，我们可以使用 DOM API 来获取元素并将其显示出来。

例如，我们可以隐藏一个带有 ID "myDiv" 的 div 元素：

<div id="myDiv" style="display:none;">
  这是要隐藏的内容。
</div>

当页面加载完成后，我们可以使用以下代码将其显示出来：

window.addEventListener('load', function() {
  var myDiv = document.getElementById('myDiv');
  myDiv.style.display = 'block';
});

预加载图片

使用预加载技术，我们可以在页面加载完成之前提前加载图片资源。这将确保当用户看到页面时，所有的图片都已经被缓存了，从而提供更好的用户体验。

以下是一个简单的预加载图片的示例：

-- -------------------- ---- -------
--- ------ - -
  -------------
  -------------
  ------------
--

-------- --------------- -
  --- ---- - - -- - - -------------- ---- -
    --- --- - --- --------
    ------- - ----------
  -
-

------------------------------- ---------- -
  ----------------
---

在上面的代码中，我们首先定义了一个包含要预加载的图片路径的数组。然后，在 preloadImages 函数中，我们使用 Image 对象来加载每个图片。最后，在 window 的 load 事件中调用 preloadImages 函数来开始预加载过程。

结论

在本文中，我们介绍了如何使用 JavaScript 和 CSS 技术来确保 HTML 页面加载完毕后再显示内容，以提供更好的用户体验。我们还学习了如何预加载图片资源以进一步优化性能。希望这些技术可以帮助你提高你的前端开发技能！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/29546