是否可以延迟用户访问的第一个页面上的元素加载
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";
然后检查是否存在名为"已访问"的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/
相关文章:
- Material Design Lite所有元素加载JS回调
- Chrome扩展:等待元素加载(async js)
- 从外部页面上的元素加载属性
- 聚合物元素加载非常缓慢
- 如何禁用 HTML 锚元素加载
- 尝试将一个元素加载到另一个元素时出现意外字符串
- 用kinetijs中的所有元素加载舞台
- 在特定元素加载时调用函数
- 如何在HTML元素加载到页面之前隐藏它们
- 是否可以延迟用户访问的第一个页面上的元素加载
- Facebook喜欢按钮不显示隐藏元素加载后
- 使用SELECT元素加载图像
- 如何使Javascript只在所有元素加载后才加载
- 在另一个元素加载后隐藏一个元素?AJAX
- 谷歌翻译元素-加载后页面准备好了
- 继续尝试函数,直到所需的DOM元素加载
- 在元素加载时调用javascript函数
- 如何检测或注册自定义元素加载并准备与之交互的回调
- HTML元素加载,即使他们没有附加到DOM?那么主干视图呢?
- 等待所有元素加载完成后执行操作