思考:为何jQuery去掉了浏览器检测

由于做HTML5相关的项目,许多前卫时髦的前端技术就需要考虑一下IE是否支持。要是在以前,可以很方便地调用jQuery的jQuery.browser来实现。

If(jQuery.browser.msie) alert(“DIE IE!”)
但这一便利在jQuery 1.9之后就不复存在了。突然觉得像失去了一个最亲密的战友,一个我一搞开发就离不开的好基友,一个我离开了就 无法写出跨浏览器的前端代码的好工具。一下子我竟不知道该如何是好。

然后每次需要考虑IE的时候,我就会去google一下,如何用1.9版本的jQuery来检测IE,但网上的多数回答都告诉我:jQuery1.9废掉勒jQuery.browser,建议用jQuery.support,但是没有人告诉我为什么?

也不知道那时我的是不是脑子被门夹了半天反应不过来为什么给废掉了,反正我的目的很简单,就是需要检测当前用户用的是不是IE,如果不是IE,那么我就需要弹出相关提示信息告诉用户你正在使用IE,某些功能可能不被支持云云。。。

无奈,以至于我的编码回到了那个没有jQuery的石器时代,用最原始的最plain的JavaScript代码来检测IE,而关于这样的方法,由于有无数前辈在与IE的博弈中积累了大量经验,现成的方法已经写过N多了,所以我也就随便拣一个用着。而且每次用的都还不一样,下次遇到要检测IE的时候,又去Google一把,得到另一段代码达到相同的效果。 继续阅读 思考:为何jQuery去掉了浏览器检测

用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)

简约的返回顶部效果(jQuery)

博客建好也快一个月了,主题是在原有主题的基础上做的修改,喜欢这样的清新简约风格,为了更好的体验,以后也会经常做修改。

一般博客的文章都比较长,看到下面不能快速返回到顶部还真是不方便,今天自己动手写了一个,是基于 jQuery 的,用起来还不错。

常见的“返回顶部”分这么3种:把返回顶部按钮放在页面最底部的,返回顶部按钮在滚动距离大于一定的距离后显示出来的,还有就是滚动距离大于 0 的时候就显示出来,喜欢最后这种,嗯,就它了~ 做好了贴出来共享下:)

HTML:

用两个 span 标签去模拟一个向上的箭头。

<div class="returnTop" title="嗖的就上去了!">
  <span class="s"></span>
  <span class="b"></span>
  返回顶部
</div>

CSS:

用 css 去模拟三角形很给力,不仅兼容性很好,而且可用的地方还非常多。这个东西用嘴说不好理解,看例子就一目了然了,更多的用 css 模拟三角形的详解和用法可以看看我写的这篇文章《三种纯CSS实现三角形的方法》。

继续阅读 简约的返回顶部效果(jQuery)