【开发实践】前端jQuery+gif图片实现载入界面

作者：System 时间：2024年08月21日分类：所有,jquery 字数：1150

以下是一个使用jQuery和gif图片实现的简单的载入界面示例：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loading Screen</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="loading-overlay">
        <img id="loading-image" src="loading.gif" alt="Loading..." />
    </div>
    <div id="content">
        <!-- 页面的主要内容 -->
    </div>
 
    <script>
        $(window).on('load', function() {
            // 页面加载完毕后，隐藏loading图层
            $('#loading-overlay').fadeOut(500, function() {
                // 在fadeOut完成后，显示内容区域
                $('#content').show();
            });
        });
    </script>
</body>
</html>

CSS部分（可选，用于美化）：




#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    z-index: 9999;
}
 
#loading-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
#content {
    display: none;
}

这段代码实现了一个简单的载入屏幕，在页面的主要内容加载完成后，会淡出载入屏幕，显示主要内容。这种方式提升了用户体验，减少了长时间的载入等待，并且不需要使用JavaScript直接操作CSS来控制载入屏幕的显示。

【开发实践】前端jQuery+gif图片实现载入界面

评论已关闭

推荐阅读