js实现的页面加载完毕之前loading提示效果完整示

本文旨在展示如何使用JavaScript在页面加载过程中显示一个loading提示效果。对于热爱网页开发和用户体验优化的朋友们，这是一个值得参考的技巧。

一、JS代码详解

我们通过JavaScript获取浏览器页面的可见高度和宽度。接着，根据loading框的尺寸（宽度为215px，高度为61px），计算出loading框在页面中应呈现的位置。这样做是为了确保loading提示框在用户视线中的最佳显示位置。

然后，我们定义了一个名为 `_LoadingHtml` 的变量，它包含了在页面未加载完毕之前要显示的loading效果的HTML内容。这个提示框的背景色为浅蓝色，透明度为80%，并包含一个加载图标和一段提示文字：“页面加载中，请等待...”。

接下来，通过 `document.write(_LoadingHtml)` 将这个loading提示框写入到页面中。当页面内容还没有完全加载完毕时，用户就能看到这个提示框。这可以有效避免用户在页面内容还没有完全展现时的重复操作，提升用户体验。

当页面内容全部加载完毕后，我们可以通过移除这个loading提示框来结束加载状态。这部分代码可能在 `window.onload` 事件回调函数中实现。值得注意的是，我们还可以使用像Cambrian这样的库来简化DOM操作，提高开发效率。Cambrian库在这里的作用是渲染页面的主体部分（'body'）。当页面主体内容渲染完毕后，我们可以移除加载提示框。

这个技巧可以显著提升网页的加载体验，特别是在网络状况不佳或页面内容较多的情况下。通过这种加载提示效果，用户可以清楚地知道页面正在加载中，从而避免不必要的重复操作。希望这个技巧对大家有所帮助。