Question

我正在尝试仅在有超过一定数量的幻灯片的情况下有条件地加载光滑的滑块jQuery库。否则，我不想使用滑块。

如果我不将脚本附加到head标记，而是在页面上发生此脚本的内联运行它，它可以正常工作。但是，一旦执行如下所示，它就会抱怨slick（）不是函数。

如何在不使用require.js的情况下首先确保光滑完成加载？

<script>
    $(document).ready(function () {

        var slideCount = $('div.recipe.slide').length;

        if(slideCount > 4) {
            $('head').append('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">');
            $('head').append('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">');
            $('body').append('<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"><\/script>');
        }

        $('.image-slider').slick({
            arrows: true,
            autoplay: true,
            autoplaySpeed: 2000,
            dots: false,
            mobileFirst: true,
            slidesToShow: 4,
            responsive: [
                {
                    breakpoint: 1,
                    settings: {
                        arrows: false,
                    },

                    breakpoint: 479,
                    settings: {
                        centerMode: true,
                    }
                }
            ]
        });
    });
</script>

Answer 1

USE Script如果加载如下：

 /*----------------------------------------------------------------------*/
   function load_js_file(_url, _callback){
        _callback=_callback||function(){};
        _url=_url||'';
        var script = document.createElement('script');
        script.src = _url;
        script.type = 'text/javascript';
        script.onload = function() {
          _callback();
        };
        document.getElementsByTagName("head")[0].appendChild(script);       
   }

/*----------------------------------------------------------------------*/


   function load_css_file(_url, _callback){
        _callback=_callback||function(){};
        _url=_url||'';
        var script = document.createElement('link');
        script.href = _url;
        script.type = 'text/css';
        script.rel  =  'stylesheet';
        script.onload = function() {
          _callback();
        };
        document.getElementsByTagName("head")[0].appendChild(script);       
   } 

/*----------------------------------------------------------------------*/    




   $(document).ready(function () {

        var slideCount = $('div.recipe.slide').length;
        if(slideCount > 4) {

            load_css_file('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css', function(){
                    load_css_file('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css', function(){
                          load_js_file('//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js', function(){


                             $('.image-slider').slick({
                                         arrows: true,
                                         autoplay: true,
                                         autoplaySpeed: 2000,
                                         dots: false,
                                         mobileFirst: true,
                                         slidesToShow: 4,
                                         responsive: [
                                                       {
                                                         breakpoint: 1,
                                                         settings: {
                                                              arrows: false
                                                         },

                                                         breakpoint: 479,
                                                         settings: {
                                                               centerMode: true
                                                         }
                                                       }
                                                     ]
                             });

                          });
                    });              
            });


        }

    });

Answer 2

您可以利用jQuery's getScript()为脚本完成加载提供回调，然后您可以运行光滑的代码（现在包含在函数中）

$(document).ready(function() {

  var slideCount = $('div.recipe.slide').length;
  slideCount = 5;
  if (slideCount > 4) {
    $('head').append('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">');
    $('head').append('<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">');
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js", function() {
      callSlick();
    });
  }

  function callSlick() {
    $('.image-slider').slick({
      arrows: true,
      autoplay: true,
      autoplaySpeed: 2000,
      dots: false,
      mobileFirst: true,
      slidesToShow: 4,
      responsive: [{
        breakpoint: 1,
        settings: {
          arrows: false,
        },

        breakpoint: 479,
        settings: {
          centerMode: true,
        }
      }]
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

加载外部脚本的jQuery竞争条件

2 个答案: