Вызвать обратный вызов после вставки тега скрипта

Question

Я искал ответ, но я не нашел. Я хочу включить скрипт Nivo Slider, только если экран больше 768 пикселей. У меня есть функция, которая создает тег скрипта, только если размер окна больше 768 пикселей, тогда я вызываю функцию из этого скрипта.

$(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(); 
    } 
});