标签: jquery

解决 Google CDN 无法连接导致网页无法加载的问题

Google Blocked国内网非常多的网站都使用免费的 Google CDN 服务来加载某些 js、字体样式库以提升网页浏览体验,例如 jQuery、Google Fonts。但是目前 Google 的大多数网站在大陆无法正常访问,因此这些本身是加快网页载入的库反而成为了阻塞网站加载的原因。这种情况国内的网站并不多,但是国外的网站却非常多地使用这些库。一般地,当 Google CDN 库称为网页加载的限制因素时,浏览器状态条会显示状态为 “正在等待 ajax.googleapis.com 的响应...” 或 “正在连接...” 等字样。

ajax.googlepis.com connection refused

如果打开控制台,能看见 Google CDN 确实正在阻塞网页加载。如果等待足够长的时间,浏览器最终会放弃加载,并呈现一个残缺的网页,这并不好。下面从网页开发者、浏览器用户的角度给出一些解决方案。

网页检测 AdBlock 的 6 种方法

adblock logo有些网页上充斥着令人厌恶的广告,这些广告不仅阻碍了信息的获取,有的还严重影响了浏览者的心情。特别是某些毫不相关的多媒体广告和弹出式窗口,不仅让人感到被骚扰,还很容易误点到,浪费宝贵的时间。由此便诞生了大名鼎鼎的跨平台 AdBlock 插件,在任何主流浏览器上都有它的扩展或插件,用户可以安装它并屏蔽绝大多数的广告。

既然 AdBlock 有检测广告并屏蔽它们的方法,作为网页制作者,其实也有反过来检测 AdBlock 的方法。

为什么要检测 AdBlock

这是一个有争论的问题:用户有选择不看广告、在浏览器页面上销毁广告的权利,网站也有捆绑广告和信息一同派发给你并收取广告商展示费用的自由。这两者都不能互相干预,并且在没有明确法律法规的环境下,你可以防范我,我也可以防范你。

ads on webpage

在 Sublime Text 直接运行 Javascript 调试控制台

sublime text javascriptSublime Text是深受喜欢的多语言编辑器,很多开发人员都选择它作为自己的主力编辑器进行创作,并且凭借其强大的可扩展性,Sublime Text功能也越来越丰富。

但是有个问题,那就是Sublime Text不支持一些语言的运行,例如javascript,我们通常通过写一个HTML页面来嵌入JS,然后再用Chrome或者Firefox的开发者工具来调试。而实际上我们也可以通过添加Build System的方法来让Sublime Text支持Javascript Console控制台调试。

利用 JSC 添加 JavaScript 控制台 (Mac OS X)

实际上Mac内置了一个javascript控制台程序,但是藏得太深,它在

/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc

里。实际上你可以在终端里直接运行这个程序,然后在终端进行调试。

为Sublime Text添加此Build System,只需打开Sublime Text,选择 Tools > Build System > New Build System... ,如图所示

HTML5 自定义属性 data-* 和 jQuery.data 详解

html5 dataset新的HTML5标准允许你在普通的元素标签里,嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由javascript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。下面介绍HTML5 Dataset 存储的实际应用,以及包括jQuery在内的四种存取方式。

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据,例如这是一个span元素,它的内容是一首音乐的名称,我们为其HTML标签里直接预置这首歌的更多信息,在HTML源码上看起来可以这样来写:

<span id="music-latch" class="musique"
data-date="2013"
data-genre="Electronic"
data-album="Settle (Deluxe)"
data-artist="Disclosure"
data-composer="Howard Lawrence & Guy Lawrence">
Latch (feat. Sam Smith)
</span>

这样,我们就很简单的为这首歌在span标签里直接内嵌了其专辑、艺术家和流派信息。

用history api"偷换"浏览器历史记录

pushstate logo

HTML5提供了新的history接口,例如pushstate,以及popstate。通常情况下,浏览器的历史记录能保存访问历史,但是因为有了history api,pushstate和replacestate,我们甚至可以“偷换掉”浏览器的历史记录,偷走后退按钮,让浏览者点按“后退按钮”时,到一个你指定的网页,看起来就像是真的后退历史记录一样!这个网页还可以跨域,而且就算不存在向前d历史记录也能创建。有什么好处呢?想让访客更多的留在你的网站上?想要……?

用history api"偷走"浏览器后退按钮

history-stealing

无需插件实现 jQuery 平滑滚动

jquery logo_6平滑滚动总能让用户体验更友好。我推荐过一款jQuery平滑滚动插件,其通过调用$.scrollTo()或$.smoothScroll()函数实现页面的平滑滚动。事实上,你不需要任何插件,不需要添加多余的代码就可以做到jquery页面平滑滚动。一切都靠jQuery自己的一行很简单的代码即可完成。

无需jQuery scroll插件实现 jQuery 平滑滚动

要实现此效果,只需运行:

$(document.body).animate({scrollTop:$(~selector).offset().top}, ~time );

即可。不需要引入jquery scroll插件。其中~selector~time是自定义的值,分别是元素目标和时间,此方法将会使页面滚动到~selector的顶部。

例如 $(document.body).animate({scrollTop:$("#header").offset().top}, 1000 ); 可以实现滚动到我的页面的顶部。

jQuery hash 插件

jquery.hash.logo

URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。

Hash存储数据有什么用

首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外,用hash存储数据也不必刷新页面。

hash可以作为一种本地临时存储的解决方案,正如cookie那样。可以在url中保存临时的用户状态这是cookie做不了的。例如含有Ajax页面的刷新,就可以直接利用hash存储当前的状态。再例如你可以配合Hashchange监听来完成一些事情。

这算是一个尝试,虽然目前少有人在hash存数据上作文章,但是如果你真的需要,可以用这个插件参考一下。

不刷新改变URL: pushState + Ajax

pushstate logo如果你玩过Google+,看到过YouTube的新界面,便会体验到这个HTML5的新功能。使用pushState + Ajax(pjax),可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。

旧的解决方案

曾说SEO和ajax是天敌。此前从Twitter开始流行Ajax+hash的方式调用内容,Google给出的解决方案是“#!~string”自动转换为“?_excaped_fragment_=~string”来抓取动态内容。但这无疑会非常麻烦:首先你需要对网站进行“?_excaped_fragment_=~string”的处理配置,而且,如果用户把网址“http://example.com/#!/~string”直接复制并分享的话,意味着网页还必须监听hashchange。不过如果你觉得这个#!很好看就没关系了。

twtter hash

jQuery Scroll (jQuery平滑滚动) 插件

是不是很想实现页面平滑滚动的效果呢?既美观又不唐突,而且还能自己控制速度,岂不是一个很好的效果吗?还好我们有强大的jQuery以及他的插件们,这样武装起来,特效什么的就太简单不过了。

新!无需插件实现 jQuery 平滑滚动!!

jqScrollFunction

 

想要一看个demo么

如果你在看这篇文章没在首页,你应该注意到了文章顶端的这个分享条;你可以点点评论链接,或者这里试试,看看是不是平滑滚动到了评论栏呢?

jQuery Background Position Animate (jQuery背景位置变换) 插件

弥补jQuery的不足

我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。除了上次提到的jQuery Color Animate (jQuery 颜色变换动画) 插件以外,还介绍一款背景位置变换(background position animte)插件。通过背景位置的动态变换,你甚至可以做出像是用flash作出的精湛动画效果。我们可以通过这一插件实现。

有一个例子是Google.com搜索结果页的+1按钮。当鼠标移上去时,你可以看到一道闪光闪过。这其实就只是background position变换而已。

其背景图片是: 

现在你可以理解为什么可以靠背景变换实现出现一道闪光的效果了。

使用方法

首先您肯定需要引用jQuery文件。推荐使用Google jQuery API,这样比较快一点。然后要在后面引用这个插件文件:

请先到这里下载此文件(jqBackgroundPositionAnimate.js),然后再合适位置引用他:

<script type="text/javascript" src="jqBackgroundPositionAnimate.js">
</script>

这之后便可以使用了。大致方法和其他的jQuery略有不同,要注意了:

$(selector).animate(

{  backgroundPosition:"1px 1px"  },

{  duration:speed,  complete: function(){}

});

其中,红色部分是可修改的,分别是选择器、背景位置、花费时间毫秒、callback函数。当然,后两者是可选的。

一个在线Demo

jqeury background position animate plugin demo由于页面比较复杂,所以不直接把他搬到这里来了,我把它放到这里了,请到这里参观。