如何在页面加载完成之前显示页面加载div

在页面加载完成之前显示页面加载div，可以通过使用HTML、CSS和JavaScript来实现。以下是一个简单的示例：

首先，在HTML文件中创建一个div，并为其添加一个类名或ID，以便在CSS和JavaScript中引用它。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="loading-div">加载中...</div>
   <script src="script.js"></script>
</body>
</html>

接下来，在CSS文件中设置加载div的样式。例如：

#loading-div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    z-index: 9999;
}

最后，在JavaScript文件中编写代码，在页面加载完成时隐藏加载div。例如：

window.addEventListener('load', function() {
    var loadingDiv = document.getElementById('loading-div');
    loadingDiv.style.display = 'none';
});

这样，在页面加载完成之前，加载div将一直显示在页面上。当页面加载完成后，JavaScript代码将隐藏它。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在页面加载完成之前显示页面加载div

相关·内容

54、尚硅谷_课程模块_课程详情页面机构收藏功能及页面呢加载显示初始化.wmv

04-jQuery/10-尚硅谷-jQuery-原生js和jQuery页面加载完成之后的区别

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐