可以通过以下步骤在 HTML 中通过 JavaScript 实现无限载入效果：
<div id="loading">
<h3>正在载入...</h3>
<p>请稍等片刻</p>
</div>#loading {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#loading h3 {
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 200px;
}
#loading p {
color: #fff;
font-size: 18px;
text-align: center;
margin-top: 20px;
}function showLoading() {
document.getElementById("loading").style.display = "block";
}showLoading();
// 在此处进行载入操作
hideLoading();function hideLoading() {
document.getElementById("loading").style.display = "none";
}完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无限载入效果</title>
<style>
#loading {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#loading h3 {
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
margin-top: 200px;
}
#loading p {
color: #fff;
font-size: 18px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="loading">
<h3>正在载入...</h3>
<p>请稍等片刻</p>
</div>
<script>
function showLoading() {
document.getElementById("loading").style.display = "block";
}
function hideLoading() {
document.getElementById("loading").style.display = "none";
}
showLoading();
// 在此处进行载入操作
hideLoading();
</script>
</body>
</html>上述代码中，showLoading()函数用于显示载入提示信息，hideLoading()函数用于隐藏载入提示信息，showLoading()函数在页面载入时调用，hideLoading()函数在载入完成后调用。