Question

我搜索了一个答案，但我没有找到。我希望在屏幕大于768px时包含Nivo Slider脚本。我有一个函数，只要窗口大小大于768px就会创建一个脚本标记，然后我从这个脚本中调用一个函数。

    $(function(){

    (function(d, s, id){
        if(window.innerWidth > 768){
            var js, fjs = d.getElementsByTagName(s)[0];
            js = d.createElement(s); js.id = id;
            js.src = "plugins/nivo-slider/jquery.nivo.slider.js";
            fjs.parentNode.insertBefore(js, fjs);
            $('#slider').nivoSlider();
        }
    }(document, 'script', 'nivo'));

    });

Javascript在脚本标记插入后立即调用nivoSlider()方法，但脚本尚未加载。如果我将nivo方法放在setTimeout()中，它就可以工作，但这是一个糟糕的黑客攻击。

有什么想法吗？

Answer 1

我建议使用jQuery.getScript：https://api.jquery.com/jQuery.getScript/

$.getScript('plugins/nivo-slider/jquery.nivo.slider.js', function() {
    $('#slider').nivoSlider();
});

或者如果你真的想要去当地：

js.onload = js.onreadystatechange = function() {
  var state = this.readyState;
  if( !this.loaded && ( !state || state=='loaded' || state=='complete' ) ) {
    this.loaded = 1;
    $('#slider').nivoSlider();
  }
}

Answer 2

您正在使用jQuery，因此使用jQuery加载脚本并使用成功处理程序。

$.ajax({
  url: "plugins/nivo-slider/jquery.nivo.slider.js",
  dataType: "script",
  cache : true,
  success: function() {
      $('#slider').nivoSlider();
  }
});

插入脚本标记后调用回调

2 个答案: