window.location.href添加loading
时间: 2023-10-15 10:24:40 浏览: 56
通过使用window.location.href进行页面跳转时,可以添加loading效果以在新页面加载完全之前提供用户反馈。您可以按照以下步骤实现:
1. 在原页面中,使用JavaScript代码在页面跳转之前显示loading效果。可以使用HTML和CSS创建一个loading元素,并使用JavaScript动态添加到页面中。例如:
```
// 创建loading元素
var loadingElement = document.createElement("div");
loadingElement.className = "loading";
// 将loading元素添加到页面中
document.body.appendChild(loadingElement);
```
2. 在跳转之前,使用setTimeout函数设置一个延时,在延时结束后执行实际的页面跳转代码。例如:
```
// 延时500毫秒后执行页面跳转
setTimeout(function() {
window.location.href = "/url";
}, 500);
```
3. 在新页面加载完全之前,loading元素会一直显示在页面上。可以使用CSS样式对loading元素进行自定义,以展示适合您的loading效果。例如:
```
.loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 添加其他样式,如背景颜色、动画效果等 */
}
```
通过以上步骤,您可以在使用window.location.href进行页面跳转时,添加loading效果以提供更好的用户体验。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [window.location.href的用法](https://blog.csdn.net/qq_39668938/article/details/106563110)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [用window.location.href做页面跳转,怎么在新页面加载完全之前实现loading效果?](https://blog.csdn.net/weixin_42583683/article/details/117782033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]