zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    理解 Redis(3)
    理解 Redis(2)
    理解 Redis(1)
    git 的基本命令
    使用python实现计算器功能
    python函数说明内容格式错误
    python的小基础
    python去除读取文件中多余的空行
    数论-下属不可以和上司顶嘴!(可能是总结)
    其他-一大堆记录 (20 Dec
  • 原文地址:https://www.cnblogs.com/gbtagscom/p/4981403.html
Copyright © 2011-2022 走看看