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

使用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 - 第三方的dribbbleAPI的jQuery插件，可以方便的获取来自的最新设计作品 imagesloaded - 图片预加载的jQuery插件 Nprogress -进度条jQuery插件主要代码基本的实现是，使用jribbble插件获取最新的设计作品，将作品地址获取，并且使用图片预加载插件imageloaded来提前加载图片，同时调用NProgresss的相关方法来提示用户当前加载的图片的进度。在页面加载中，调用如下：1. NProgress.start();保证调用Nprogress来正确显示进度条的进度1. $shotlist.imagesLoaded().done( function( instance ) 2. NProgress.done(); /当所有的图片加载完毕后，确认进度条加载完毕3. $shotlist.fadeIn();4. $loading.fadeOut();5. )6. .progress( function( instance, image ) 7. if(image.isLoaded)8. loadingcount+;9. NProgress.inc(); /使用这个方法来确认每次预加载一张图片后，进度条会前进一些点点10. $imgcount.html(loadingcount);11. 12. );以上就是控制进度条的具体代码。完整的JS代码如下：1. $(function()2. var $shotlist = $(#shotlist), $loading = $(.loading), $imgcount = $(#imagecount);3. 4. NProgress.start();5. $.jribbble.getShotsByList(popular, function(data)6. 7. var items = , loadingcount = 0;8. 9. $.each(data.shots, function (i, shot) 10. items.push();11. items.push( + shot.title + );12. items.push();13. items.push();14. items.push();15. items.push(设计师： + + );16. );17. 18. var shotlist = items.join();19. $shotlist.hide().append(shotlist);20. 21. $shotlist.imagesLoaded().done( function( instance ) 22. NProgress.done();23. $shotlist.fadeIn();24. $loading.fadeOut();25. )26. .progress( function( instance, image ) 27. if(image.isLoaded)28. loadingcount+;29. NProgress.inc();30. $imgcount.html(loadingcount);31. 32. );33. 34. , page: Math.floor(Math.random()*20), per_page: 40);35. );HTML1. 2. 3. 4. 5. 来自Dribbble的最受欢迎设计作品6. 7. 8. 9. 10. 11. 12. 来自Dribbble的最受欢迎设计作品 13. 14. 15. 16. 正在加载第?张图片17. 18. 来自极客标签：terryli19. 20. 21. 22. 23. 24. 25. CSS代码1. body2. background: #EEE;3. 4. 5. .pageheader6. width:960px;7. margin: 0 auto;8. font-family: microsoft yahei,Arial,sans-serif;9. font-size:22px;10. font-weight:normal;11. padding: 20px 0;12. border-bottom: 1px solid #DDD;13. color: #EA4C89;14. 15. 16. .loading17. width:960px;18. margin: 0 auto;19. text-align:center;20. margin-top: 150px;21. margin-bottom: 150px;22. font-size:22px;23. font-family: microsoft yahei,Arial,sans-serif;24. color: #555;25. 26. 27. #imagecount28. color: #EA4C89;29. padding: 5px;30. font-size: 40px;31. font-weight:bold;32. font-family: Constantia,Georgia;33. 34. 35. #shotlist36. width:960px;37. margin: 0 auto;38. border: 1px solid #EFEFEF;39. 40. 41. #shotlist article42. float: left;43. width: 240px;44. margin: 20px 0;45. text-align:center;46. 47. 48. #shotlist article img49. border: 8px solid #FFF;50. 51. 52. .details53. font-size:14px;54. font-weight:normal;55. white-space: nowrap;56. font-family:Arial;57. 58. 59. .author60. font-size:12px;61. font-weight:normal;62. white-space: nowrap;63. font-family: microsoft yahei,Arial,sans-serif;64. 65. 66. foote