window.location.href 跳转会闪怎么解决 示例
时间: 2023-11-02 17:02:56 浏览: 38
在进行页面跳转时,如果页面过于复杂或加载时间过长,可能会出现页面闪烁的情况。这种情况可以通过以下方法解决:
1. 使用 CSS 隐藏页面内容,直到页面完全加载完成后再显示。
```html
<style>
body {
visibility: hidden;
}
</style>
<body onload="document.body.style.visibility='visible'">
```
2. 使用 JavaScript 将页面滚动条位置记录下来,在页面加载完成后再将页面滚动条位置恢复到之前的位置。
```javascript
var scrollPosition = window.scrollY;
window.location.href = "http://www.example.com";
window.addEventListener("load", function () {
window.scrollTo(0, scrollPosition);
});
```
3. 使用 AJAX 技术进行页面跳转,避免页面整体刷新,减少页面闪烁的可能性。
```javascript
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function () {
document.querySelector("#content").innerHTML = xhr.responseText;
});
xhr.open("GET", "http://www.example.com");
xhr.send();
```