发表于: 2017-06-15 22:35:17

1 829


今天完成的事情:上午继续昨天的计划,按照邵博师兄的提示,使用数组的方法,将首页最新职位的数据请求和轮播效果进行了实现。然后在跳转到搜索职位页面时发现分页功能有bug,按条件搜索时,页数保留了上一次的结果。花了将近一个小时进行了处理解决。下午学习懒加载的知识,将各页面的css文件通过angular的oclazyload插件,在路由中进行加载,而不是像以前一样都加载到首页。后来想通过这个插件实现各页面写死部分图片的加载,没有在网上找到相关demo,自己能力欠缺,最后又学习了一下jquery的图片懒加载的插件,完成了各个页面中写死部分图片懒加载的效果。

明天计划的事情:今天发现成功案例中更多按钮跳转后的页面的数据还没有渲染好,明天先做这部分,然后从首页开始,逐页对样式和布局在规定分辨率范围内的展示效果进行测试,修改出现错乱布局的地方。

遇到的问题:

 今天遇到的问题有2个,一个是搜索功能中分页保留上一次请求结果的数据,没有随条件搜索重新从第一页开始请求数据,清除按钮也没有添加对于页码的处理。经过一个多小时的调试和对数据关系的梳理,最后在跳转页面前的ui-sref中追加了一个page:1的数据,然后在清除按钮的代码中也加入了page:1的数据,这样在按条件请求是,如果上一次数据查询的页码是1之后的数字高亮的话,再按其他条件请求,就会从第一页开始加载数据,而不是上一次的页码。

 第二个,是懒加载的实现,由于目前js部分的控制器、路由、http请求服务,分别进行了集中处理,放在3个不同的js文件中,也没有希望再次拆分的预期,所以js部分没有通过懒加载进行处理,而是统一放在了index.html文件body结束标签之前。对css文件进行了懒加载处理,网上找到了angular框架中oclazyload.js插件。学习了翻译的官方文档,照猫画虎,将css文件按照各html文件的依赖关系,进行了懒加载的处理。首先,只修改了一个css文件修改了加载方式,验证了其懒加载的效果后,才开始大规模使用,然后在各页面上第一次加载,查看network中加载列表的变化,验证了懒加载的作用。在network观察css文件加载过程中,发现写死部分的图片加载也是一个很耗费时间的过程,就想着也用懒加载的方法把图片进行修改一下。起初以为这个angular的懒加载插件也会像加载css、js、html文件一样加载图片,但是修改了,页面不渲染了。然后就找这个插件加载图片的实现方法,找了半天大多是写如何加载css或者js的。后来有折回来,学习了一下jquery中图片懒加载的插件。然后对一部分页面的图片按照其文档的程进行修改,刷新页面,滑动滚轮进行了验证,达到了在网站上所看demo的效果。明天继续把剩余页面写死部分的图片进行懒加载修改。

收获:学到了angular的懒加载插件简单加载css文件的功能,还有jquery懒加载图片的功能,感觉比angular的插件还简单直接。有时间抽空看看能不能也懒加载css和js文件,如果可以的话,就只使用一个懒加载插件就可以了。


返回列表 返回列表
评论

    分享到