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

  • 相关阅读:
    HDU 4912 Paths on the tree(LCA+贪心)
    BZOJ 1044 木棍分割(二分答案 + DP优化)
    Codeforces 551E GukiZ and GukiZiana(分块思想)
    计蒜客 UCloud 的安全秘钥(随机化+Hash)
    HDU 5794 A Simple Chess(杨辉三角+容斥原理+Lucas定理)
    mac-profile
    mac-httpd
    launchctl
    brew
    操作系统
  • 原文地址:https://www.cnblogs.com/gbtagscom/p/4981403.html
Copyright © 2011-2022 走看看