html 页面跳转 加载效果,用window.location.href做页面跳转,怎么在新页面加载完全之前实现loading效果?...
时间: 2024-02-20 09:56:25 浏览: 15
可以使用以下方法实现页面跳转加载效果:
1. 首先,在原页面中添加一个遮罩层和加载动画,用于遮盖页面内容和提示用户页面正在加载中。
2. 在跳转页面前,先显示遮罩层和加载动画。
3. 在跳转页面后,使用`window.onload`事件或者jQuery的`$(document).ready()`方法等页面加载完成后的回调函数,隐藏遮罩层和加载动画。
示例代码如下:
```html
<!-- 原页面 -->
<div id="loading">
<div class="mask"></div>
<div class="loading-img"></div>
</div>
<script>
// 点击跳转链接时显示loading效果
$('a').on('click', function() {
$('#loading').show();
});
// 页面加载完成后隐藏loading效果
$(document).ready(function() {
$('#loading').hide();
});
</script>
<!-- 跳转页面 -->
<script>
// 在页面加载完成后隐藏loading效果
window.onload = function() {
$('#loading').hide();
};
</script>
```
需要注意的是,如果跳转的是外部页面,由于跨域限制,无法通过`window.onload`等方式获取到跳转页面的加载状态,此时可以考虑使用iframe嵌套页面或者使用Ajax异步加载页面内容等方式。