<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>延迟加载示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
#loading {
text-align: center;
margin-top: 100px;
font-size: 24px;
color: #333;
}
#content {
display: none;
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.spinner {
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="loading">
<div class="spinner"></div>
<p>正在加载数据，请稍候...</p>
</div>
<div id="content">
<h1>欢迎来到我的网站</h1>
<p>这是延迟加载的内容，将在几秒后显示。</p>
<p>页面加载完成时间: <span id="loadTime"></span></p>
<div class="data-section">
<h2>最新消息</h2>
<ul id="newsList">
<!-- 动态加载的内容将在这里显示 -->
</ul>
</div>
</div>
<script>
$(document).ready(function() {
// 记录页面加载时间
var now = new Date();
$('#loadTime').text(now.toLocaleString());
// 模拟数据加载延迟
setTimeout(function() {
// 隐藏加载动画
$('#loading').fadeOut('fast', function() {
// 显示内容
$('#content').fadeIn('slow');
// 模拟加载动态数据
var newsItems = [
"网站新版上线，欢迎体验",
"夏季促销活动开始",
"新增用户反馈功能",
"系统维护通知"
];
// 添加新闻列表项
$.each(newsItems, function(index, item) {
$('#newsList').append('<li>' + item + '</li>');
});
});
}, 3000); // 3秒后显示内容
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
