码迷,mamicode.com
首页 > 其他好文 > 详细

DOM操作与引用资源的前后关系

时间:2015-11-20 19:31:14      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

 
      在网站开发过程中遇到这样的一个问题:在主页面中使用angular-ui-route来路由加载其他页面(tpl_main.html),在其他页面中使用了swiper,但是显示的时候并没有达到预想的能有手动拖拽显示的立体效果,页面进行错误排查,最后发现的问题是由于在由ui-route引入的页面中使用的swiper与主页面中引用jquery(swiper依赖于jquery)前后位置出现了问题,导致swiper不能正常使用,下面请看具体的错误与解决方案!

        首先我们来看下在原先错误的情况下的代码:

                                                   技术分享

        这个是由ui-route需要引入的页面,从代码中我们可以看到,该页面(tpl_main.html)使用了swiper,然后我们来看主页面中的代码情况:

                                                 技术分享

        熟悉angular的朋友都知道,由ui-route加载的tpl_main.html页面将被防止到ui-view的div中,而在主页面中,jquery的引入是在tpl_main.html引入之后,这就使得jquery的引入在swiper之后,从而造成未能达到swiper原有的效果(js文件放置在底部有助于网站的优化)

                注:这里在做效果演示的时候遇到了一个坑,因为先前使用过jquery的CDN,并且该jquery的引入是之前ui-route引入的tpl_main.html之前,因而一直达不到效果(哎,CDN的缓存原因,好心酸,已被十万伏特击中N次)

        解决方案:将jquery从"body"的尾部放置到head中,从而jquery的引入在swiper之前,具体如下:

                                              技术分享

        正确的效果如下:

                                  技术分享

原文链接:http://www.gbtags.com/gb/share/8919.htm

DOM操作与引用资源的前后关系

标签:

原文地址:http://www.cnblogs.com/gbtagscom/p/4981403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!