是否可以延迟用户访问的第一个页面上的元素加载

Is it possible to delay an element loading on the first page that a user visits?

本文关键字:元素 加载 第一个 是否 延迟 用户 访问      更新时间:2023-09-26

我的一个客户希望在他们的网站上实现实时聊天系统。我可以很好地实现它——它是通过脚本标记调用的。

他们还希望它在加载之前有一个轻微的延迟。我曾想过使用setTimeout来延迟加载,但事实证明,他们只希望在第一次访问该网站时发生这种情况。

有没有一种方法可以使用setTimeout一次,然后跳过该会话后续加载的超时?

使用cookie:
在脚本中创建一个名为visited的cookie,并将其设置为"yes":

document.cookie="visited=yes";

然后检查是否存在名为"已访问"的cookie:

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');     //creates an array of all cookies for the page
    for (var i=0; i<ca.length; i++) {        //loops through each variable
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0)            //if there is a match, i.e. this cookie is called 'visited'
            return c.substring(name.length,c.length); //return, with the value of 'visited'
    }
    return "";
}
if (getCookie("visited") == "yes") {
    //user has previously visited site; don't delay
}

如果你正在寻找更轻量级的解决方案,试试这个:

function cookieExists(cname) {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
            if (cookies[i].split('=')[0] == cname) return true;
            else break;
    }
    return false;
}
if(cookieExists("visited")) {
    //user has visited site before
}

它检查名为"已访问"的cookie是否存在


如果你想让它超级浓缩,不在乎可读性或可维护性,试试这个:

function cookieExists(n){var c = document.cookie.split(';');for (var i=0;i<c.length;i++){if (c[i].split('=')[0]==n) return true; else break;}return false;}

这就是通过localStorage 实现的方法

localStorage.setItem('visited', true);
if(localStorage.getItem('visited')){
    // your delayed function here 
}

唯一的问题是对localStorage的支持不会覆盖旧的浏览器。请参阅:http://caniuse.com/#feat=namevalue-存储

此外,似乎没有人知道localStorage的设置时间。如果您每次访问该网站都需要该功能,您可以使用sessionStorage(因此,如果同一客户端在另一次访问时打开该网站,则应再次为其启动延迟功能)。

我在这里做了一个非常粗糙的jsfiddle(使用jquery):http://jsfiddle.net/lharby/mhf9ysqu/