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

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

我的一个客户想要在他们的站点中实施实时聊天系统。我可以很好地实现它 - 它是通过脚本标记调用的。

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

有没有办法使用一次 setTimeout,然后在该会话的后续加载中跳过超时?

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

document.cookie="visited=yes";

然后检查是否存在名为 'visited' 的 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
}

它检查是否存在名为 'visited' 的 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-storage

此外,似乎没有人知道 localStorage 设置了多长时间。如果您需要每次访问该站点的功能,您可以使用 sessionStorage(因此,如果同一个客户端在另一次访问时打开该站点,延迟功能应该再次为他们触发)。

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