在插入大量DOM元素时显示"工作"指示符,可以使用以下方法:
可以使用CSS动画来创建一个"工作"指示符,例如一个旋转的动画。在HTML中添加一个元素,例如一个div,并将其样式设置为一个旋转动画。
<div class="loading-indicator"></div>
在CSS中定义一个旋转动画:
.loading-indicator {
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #333;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
可以使用JavaScript在插入DOM元素时显示"工作"指示符。在插入DOM元素之前,显示"工作"指示符,并在插入完成后隐藏它。
// 显示"工作"指示符
function showLoadingIndicator() {
var indicator = document.createElement('div');
indicator.className = 'loading-indicator';
document.body.appendChild(indicator);
}
// 隐藏"工作"指示符
function hideLoadingIndicator() {
var indicator = document.querySelector('.loading-indicator');
if (indicator) {
indicator.parentNode.removeChild(indicator);
}
}
// 插入大量DOM元素
function insertManyElements() {
showLoadingIndicator();
// 插入大量DOM元素的代码
hideLoadingIndicator();
}
这些方法可以帮助您在插入大量DOM元素时显示"工作"指示符,以提高用户体验并提醒用户正在进行操作。
领取专属 10元无门槛券
手把手带您无忧上云