用Jquery.cookie判断用户是否第一次访问

挺长时间没更新博客了,最近事很多,公司的,家里的…还拖着HTML5的播放器的歌词功能没完成呢,惭愧啊,哈哈,近期回更新上:)

最近经常用到要判断用户是否第一次访问该网站,如果是的话,就出现一些帮助的 tips,现在的网站做的都越来越复杂了,这样对用户体验很有帮助。

这个功能如果你不想兴师动众,又没有用户登录的信息,对于“散户”,用前端来控制最简单的方式就是利用 cookie 了,但不足的就是清理cookie后,就又会判断为第一次访问了。如果想更精准的操作,那就操作数据库吧,但这又比较适合有用户登录记录的情况,对“散户”想精准,那就太难了。

首先引入 jQuery 和 jQuery.cookie,原理非常简单,给 cookie 设置一个 visits 值,通过这个值来判断用户是否是第一次访问本站。

提示:cookie 是需要服务环境支持的,本地不起作用。

    var options = {
        expires : 1
    };

    if ($.cookie('visits') == null) {
        //第一次访问
        $.cookie('visits', '1', options);
    }else{
        //不是第一次访问
    }

继续阅读 用Jquery.cookie判断用户是否第一次访问

利用图片延迟加载来优化页面性能(jQuery)

图片延迟加载也称懒加载,常用于页面很长,图片很多的页面,以电子商务网站居多,比如大家常上的京东,淘宝,页面以图居多,整个页面少说几百K,多则上兆,如果想一次性加载完成,不仅用户要哭了,服务器也得哭了。

为了避免这种请况发生,目前主流的做法是页面初次加载时,只显示当前可视区域的图片,当用户滚动页面的时候,当图片进入可视区域时再加载,这样可以明显的提高页面加载速度,而更少的图片并发请求数,也可以大大的减轻服务器的压力,可谓一举多得。

图片延迟加载的原理比较简单,先把图片的真实地址写在自定义的一个属性上,比如 data-url(HTML5中以 data- 开头的自定义属性都是合法的),src 地址最好不要空着,放一个 1×1 的全透明占位图片就行了,如:

<img src="images/transparent_img.png" data-url="images/real_img.jpg">

也可以加上如果用户禁用JS后的替代方案:

<img src="images/transparent_img.png" data-url="images/real_img.jpg" >
<noscript><img src="images/real_img.jpg" ></noscript>

当页面滚动的时候开始计算图片是否处在当前窗口的可视区域,如果在的话,就把 src 的假地址替换成 data-url 的真实地址,ok,原理就是这样,很简单吧。

网上详细讲解这个效果的很多,例子也不少,大家有兴趣可以搜一下。最近在看前端性能优化方面的东西,正好上午没事想写个插件练练手,就写了这个简单的延迟加载的插件,基于 jQuery,代码不多,只有 60 行:

继续阅读 利用图片延迟加载来优化页面性能(jQuery)