使用 AJAX 技术异步加载页面,避免出现沙漏。
在页面加载完成前,使用 JavaScript 显示加载中的动画,等页面加载完成后再隐藏动画。
示例代码:
HTML:
CSS:
#loading {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
display: flex;
justify-content: center;
align-items: center;
}
#loading img {
width: 50px;
}
JavaScript:
$(document).ready(function() { // 等页面加载完成后执行以下代码
$('#loading').show(); // 显示加载中的动画
});
$(window).on('load', function() { // 等所有资源都加载完成后执行以下代码
$('#loading').hide(); // 隐藏加载中的动画
});