отложенной загрузки плагина (JQuery)

Question

$('a.lightbox').hover(function() { 
    if (jQuery().lightbox) { 
     // required, otherwise lightbox.js will be loaded on hover each time 
     $("a.lightbox").lightbox({ 
      'type': 'iframe', 
      'overlayOpacity': 0.5, 
      'width': 632, 
      'hideOnContentClick': false 
     }); 
    } else { 
     // load script 
     $.ajax({ 
      url: "js/lightbox.js", 
      dataType: 'script', 
      cache: true, 
      success: function() { 
       // load css 
       $('head').append('<link rel="stylesheet" type="text/css" href="css/lightbox.css">'); 
       // lightbox function 
       $("a.lightbox").lightbox({ 
        'type': 'iframe', 
        'overlayOpacity': 0.5, 
        'width': 632, 
        'hideOnContentClick': false 
       }); 
      } 
     }); 
    } 
}); 

... это отлично работает на локальном компьютере, но не совсем, когда загружен на сервер, так как 12Kb lightbox.js и lightbox.css требуется некоторое время для загрузки.

Я хотел бы сделать что-либо из них:

1. Начало загрузки JS/CSS на парении, но отключить для х секунд до щелчка, пока они не загружены.
2. Onclick, задержка функции за x секунд, чтобы открыть лайтбокс до загрузки js/css.
3. Задержка загрузки lightbox.js и lightbox.css в течение примерно 1 минуты после загрузки страницы.

Я предпочитаю третий вариант, но не знаю, как реализовать любой из них.

Буду признателен за любую помощь! Благодаря!

Answer 1

Хорошо, это работает для меня:

setTimeout(function(){ 
    $.ajax({ 
     url: "js/lightbox.js", 
     dataType: 'script', 
     cache: true, 
     success: function() { 
      $('head').append('<link rel="stylesheet" type="text/css" href="css/lightbox.css">'); 
      $("a.lightbox").lightbox({ 
       'type': 'iframe', 
       'overlayOpacity': 0.5, 
       'width': 632, 
       'transitionIn': 'elastic', 
       'transitionOut': 'elastic', 
       'hideOnContentClick': false 
      }); 
     } 
    }); 
}, 10000); 

Answer 2

success: function() { 
    // load css 
    $('head').append('<link rel="stylesheet" type="text/css" href="css/lightbox.css">'); 

    WaitLightbox(function() {/*lightbox funcion*/}); 
} 


function WaitLightbox(callback) 
{ 
    if (jQuery().lightbox === undefined) 
     setTimeout(function(){WaitLightbox(callback);}, 100); 
    else 
     callback(); 
} 

Answer 3

Вы можете использовать часть JQuery для загрузки после загрузки страницы с функцией или AJAX без каких-либо таймеров, просто загружает после страницы готова.

Пример:

/* function to allow inclusion of other files 
Included this way to allow addition AFTER the page loads- that is, fake inclusion in this Javascript file 
*/ 
function includeJS(jsPath) 
{ 
    var script = document.createElement("script"); 
    script.setAttribute("type", "text/javascript"); 
    script.setAttribute("src", jsPath); 
    document.getElementsByTagName("head")[0].appendChild(script); 
}; 
$(function() 
{ 
includeJS('js/lightbox.js'); 
}); 

вы можете сделать то же с файлом CSS. Обратите внимание, что загрузка ajax с jquery хорошо документирована в другом месте в StackOverflow и документации jQuery.

Answer 4

я наткнулся на что-то похожее на это здесь http://www.1stwebdesigner.com/development/quick-tip-get-more-efficient-with-jquerys-getscript/ я не знаю, если это помогает.