js如何判断window.href="http://www.xxx.com"中的网页加载进度

function gotoindex(){
    window.location.href = 'http://www.xxxx.com'
    //如果www.xxxx.com超过5秒还没有展示成功,则出现弹层
}

请教一下,这个该如何实现?

阅读 7.1k
4 个回答
// 延迟 5 秒执行弹层代码
setTimeout(function(){
    // 弹层代码
}, 1000 * 5);

// 5秒后还没跳转过去自然会执行 setTimeout 里的代码
// 提前过去了就更不用管了
window.location.href = 'http://www.xxxx.com';
window.location.href = 'https://xxx.com'

好像是会跳到

xxx.com

这个网站了吧?

没展示成功具体指什么?

location.href执行后是马上发起请求跳转页面的。所谓跳转速度慢,我理解是新页面全部渲染完成的耗时比较长的意思吧。如果是,那这个问题和location.href并无关联,每个页面都可能因为各种原因打开慢的。而用js来监听页面加载耗时这种事情,似乎超出js能力范围了,加载js本身这件事由于网络或者服务器的关系js就控制不了。
非严谨的办法,可以在html的head最开始设置一个页面加载state变量,初始状态false表示为加载完成,执行setTimeout到时根据state判断页面是否加载完成来选择执行那些操作。而在某个你认为页面算加载完成的地方,改变state为true,可以是document.onload执行完的时候,也可以是window.onload执行完的时候。

<html>
<head>
    <script>
        var state = false;
        setTimeout(function(){
            if(!state){
                ...
            }
        }, 5000);
        document.onload = function(){
            ...
            state = true;
        }
    </script>
</head>
...
</html>

但这种做法无法保证setTimeout按时执行,而且setTimeout开始执行的时间也无法控制,只能作为非严谨监听页面加载超时的方式吧。。。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题