使用JS类库NProgress来优化“加载中”用户体验.docVIP

使用JS类库NProgress来优化“加载中”的用户体验 和桌面应用比较起来，web应用或者网站中处理加载中效果会显得比较简单一些，当然和早期的网站相比较起来，我们已经在用户体验的角度上提高了不少，但是仍旧可以在UI和用户体验上做一些小小的创新。 在今天这篇web开发教程中，我将使用一个小巧的JS类库 -?NProgress?来小小的提高一下用户访问页面的用户体验? ，这个JS类库非常精悍，可以帮助你生成比较酷的“加载中”效果（使用了CSS3的动画效果），可以有效地帮助你提示用户当前页面加载的进度，当然web页面加载中，其实无法准确的提示用户当前加载的百分比，但是作为web应用或者网站开发来说，我们可以提示加载最慢的一些内容，例如，图片，特别是图片展示类型的网站可能更需要类似的用户体验。 简单介绍一下NProgress，它包含了如下几个常用的方法： NProgress.start()?— 显示加载条 NProgress.set(0.4)?— 设置加载的百分比 NProgress.inc()?— 增加一点儿 NProgress.done()?— 完成进度条 我们可以调用以上方法来帮助你提示用户页面加载的过程和进度。 在开发这个效果之前，我们介绍一下我们实现本文演示中使用的一些类库，包括： jQuery -?知名第三方JS类库 jribbble - 第三方的dribbble?API的jQuery插件，可以方便的获取来自的最新设计作品 imagesloaded? - 图片预加载的jQuery插件 Nprogress -?进度条jQuery插件 主要代码 基本的实现是，使用jribbble插件获取最新的设计作品，将作品地址获取，并且使用图片预加载插件imageloaded来提前加载图片，同时调用NProgresss的相关方法来提示用户当前加载的图片的进度。 在页面加载中，调用如下： NProgress.start(); 保证调用Nprogress来正确显示进度条的进度 $shotlist.imagesLoaded().done( function( instance ) { NProgress.done(); //当所有的图片加载完毕后，确认进度条加载完毕 $shotlist.fadeIn(); $loading.fadeOut(); }) .progress( function( instance, image ) { if(image.isLoaded){ loadingcount++; NProgress.inc(); //使用这个方法来确认每次预加载一张图片后，进度条会前进一些点点 $imgcount.html(loadingcount); } }); 以上就是控制进度条的具体代码。 完整的JS代码如下： $(function(){ var $shotlist = $(#shotlist), $loading = $(.loading), $imgcount = $(#imagecount); NProgress.start(); $.jribbble.getShotsByList(popular, function(data){ var items = [], loadingcount = 0; ? $.each(data.shots, function (i, shot) { items.push(article); items.push(h2 class=details + shot.title + /h2); items.push(a href= + shot.url + target=_blank class=linkc); items.push(img src= + shot.image_teaser_url + alt= + shot.title + ); items.push(/a); items.push(div class=author设计师：a href= + shot.player.url + + + /a/div/article); }); var shotlist = items.join(); $shotlist.hide().append(shotlist); ? $shotlist.imagesLoaded().done( function( instance ) { NProgress.done(); $shotlist.fadeIn(); $loading.fadeOut(); }) .progress( function( i