DOM操作与引用资源的前后关系
2015-11-20 17:07
239 查看
![](http://www.gbtags.com/gb/networks/uploadimgthumb/1bb6a05a-8237-46db-8c48-3f05c9982811.png)
在网站开发过程中遇到这样的一个问题:在主页面中使用angular-ui-route来路由加载其他页面(tpl_main.html),在其他页面中使用了swiper,但是显示的时候并没有达到预想的能有手动拖拽显示的立体效果,页面进行错误排查,最后发现的问题是由于在由ui-route引入的页面中使用的swiper与主页面中引用jquery(swiper依赖于jquery)前后位置出现了问题,导致swiper不能正常使用,下面请看具体的错误与解决方案!
首先我们来看下在原先错误的情况下的代码:
![](http://www.gbtags.com/gb/networks/uploadimgthumb/d43cbaa2-dad0-485b-9d6e-ab3d6f58b382.png)
这个是由ui-route需要引入的页面,从代码中我们可以看到,该页面(tpl_main.html)使用了swiper,然后我们来看主页面中的代码情况:
![](http://www.gbtags.com/gb/networks/uploadimgthumb/f9a7ef18-f5c5-4f16-b9ac-6f7f17fec700.png)
熟悉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/networks/uploadimgthumb/b6a4cfbd-3ba4-4d89-9c35-f57e2b1b116f.png)
正确的效果如下:
![](http://www.gbtags.com/gb/networks/uploadimgthumb/1bb6a05a-8237-46db-8c48-3f05c9982811.png)
原文链接:http://www.gbtags.com/gb/share/8919.htm
相关文章推荐
- 【转】利用JMeter进行压力测试
- Web配置字符乱码
- Eclipse启动时报Failed to initialize Monitor Thread:Unable to establish loopback connection
- Masonry介绍与使用实践:快速上手Autolayout
- Svn中Path is not a working copy directory解决办法
- 《嵌入式产品分析与设计》第8章整理
- 安卓中读写权限问题以及修改读写权限问题
- c++ 八进制 十六进制表示
- 【转】使用JMeter做性能测试的心得
- Linux运维工程师中级面试题
- Linux C 编程内存泄露检测工具(一):mtrace
- Spring中写带有like的SQL语句
- 近几天使用到多张表合成一张表、时间转化笔记。
- android MVP设计模式实践
- 【Java Script 入门之路之词法结构】
- 织梦添加自定义属性
- 图练习-BFS-从起点到目标点的最短步数
- 小P寻宝记——好基友一起走
- 安装包制作工具NSIS (NullSoft Scriptable Install System)
- <转> jquery radio 常见操作