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


     
          在网站开发过程中遇到这样的一个问题:在主页面中使用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

  • 相关阅读:
    国内BI工具/报表工具厂商简介
    国内外主流BI厂商对比
    目前国内几大著名报表软件(2014更新)
    从基因组可视化工具——circos说起,circos安装
    30 个最好的数据可视化工具推荐
    用数据讲故事 七种不同的数据展示方法
    大数据时代,统计学方法有多大的效果?
    Oracle不能导入空表解决方案
    ORA-20000:ORU-10027:buffer overflow,limit of 10000 bytes错误4
    结构体内存对齐的要素--数据成员对齐的规则
  • 原文地址:https://www.cnblogs.com/gbtagscom/p/4981403.html
Copyright © 2020-2023  润新知