jQuery Ajax加載和getScript

我想設置我的網站，以便主要區域中的內容通過JavaScript加載（某些頁面需要一段時間才能呈現）。然而，當使用jQuery.load（），jQuery.getScript和jQuery.ajax（）時，我遇到了一些邏輯問題。jQuery Ajax加載和getScript

我需要能夠通過getScript加載某些JavaScript文件，以便我可以在加載的內容中使用這些函數等。

的index.php - 正顯示主文件（也包含#loading）
JS /的script.js - 幾個JavaScript文件我需要 - 包含負載代碼
JS/* JS文件能夠負載
load.php後內#maincontent使用 - 該文件被加載到#maincontent

的script.js：

$(document).ready(function() { 
$('#loading').fadeIn('fast'); 
$('#maincontent').load('load.php', function() { 
    $('#loading').fadeOut('fast'); 
    $('#maincontent').fadeIn('slow'); 
}); 

$('#navigation li a').click(function() { 
    $('#maincontent').fadeOut('fast'); 

    $.getScript('js/jquery.contextMenu-1.01.js'); 
    $.getScript('js/jquery-1.5.1.min.js'); 
    $.getScript('js/jquery-ui-1.8.12.custom.min.js'); 
    $.getScript('js/jquery.qtip-2.0.0.min.js'); 
    $.getScript('js/ajax.js'); 

    $.ajax({ 
     method: 'get', 
     url: 'load.php', 
     data: 'page=' + $(this).attr('rel'), 
     beforeSend: function() { 
      $('#loading').fadeIn('fast'); 
     }, 
     complete: function() { 
      $('#loading').fadeOut('fast'); 
     }, 
     success: function(html) { 
      $('#maincontent').fadeIn('slow'); 
      $('#maincontent').html(html); 
     } 
    }); 
}); 

$.getScript('js/jquery.contextMenu-1.01.js'); 
$.getScript('js/jquery-1.5.1.min.js'); 
$.getScript('js/jquery-ui-1.8.12.custom.min.js'); 
$.getScript('js/jquery.qtip-2.0.0.min.js'); 
$.getScript('js/ajax.js'); 
});

正如你所看到的，我想首先加載load.php，而沒有任何URL參數和用戶的任何交互。雖然load.php每次都能正確加載，但javascript代碼並不能說明這一點。有時它可以工作，其他時候我得到一個乾淨的控制檯之前刷新頁面幾次（沒有錯誤）。

控制檯中的錯誤表明js代碼在load.php中被使用之前未正確加載。如果load.php需要一段時間（使用PHP sleep（5）函數進行測試），則尤其如此。

讓我知道如果我需要澄清什麼:)

來源

2011-04-30 John Doe

如果你使用jQuery來加載你的PHP，那麼你不需要再通過'getScript'來包含它。我建議在頁面加載時加載所有JavaScript，並且只通過load（）添加內容，特別是避免重新包含框架和插件。 – tvanfosson 2011-04-30 03:30:47

你真的不應該加載所有這些腳本的使用getScript加入。您每次都需要一些（或全部？），所以爲什麼不把它們包含在頁面上。另外，由於你使用jquery來加載jquery，我會說你已經將它包含在頁面中。所以不要嘗試再次加載它。

來源

2011-04-30 03:29:00

我同意100％。另外，@ John Doe可以將所有腳本合併到一個文件中。設置一個過期的高日期，這樣腳本將被緩存在後續頁面加載和訪問 – Andre 2011-04-30 03:34:49

@kingjiv我實際上嘗試之前，我採取了這種做法。當在index.php中加載所有內容並使用load/ajax函數加載#maincontent時，我沒有在控制檯中發現任何錯誤，但我似乎無法獲得任何javascript（滑塊，qtip，contextmenu等）到在加載的內容中工作。你的迴應讓我相信這是做到這一點的正確方法，我只需要弄清楚如何讓js在加載的內容中工作！ – 2011-04-30 03:56:34

你在控制檯上遇到什麼樣的錯誤？ – 2011-04-30 04:01:11

如果問題出在加載時間上，那麼應該考慮使用具有延遲行爲的最新版本的jQuery。

你可以，例如，做：

var wait1 = $.getScript('js/jquery.contextMenu-1.01.js'); 
var wait2 = $.getScript('js/jquery-1.5.1.min.js'); 
var wait3 = $.getScript('js/jquery-ui-1.8.12.custom.min.js'); 
var wait4 = $.getScript('js/jquery.qtip-2.0.0.min.js'); 
var wait5 = $.getScript('js/ajax.js'); 
$.when(wait1, wait2, wait3, wait4, wait5).then(function() { 
    $.ajax({ 
     method: 'get', 
     url: 'load.php', 
     data: 'page=' + $(this).attr('rel'), 
     beforeSend: function() { 
      $('#loading').fadeIn('fast'); 
     }, 
     complete: function() { 
      $('#loading').fadeOut('fast'); 
     }, 
     success: function(html) { 
      $('#maincontent').fadeIn('slow'); 
      $('#maincontent').html(html); 
     } 
    }); 
}, function() { handleErrorsFunction()});

這將等到所有的getScript加入的調用返回，然後進行Ajax調用load.php（或會觸發如果在handleErrorsFunction（）以上失敗）。

來源

2011-04-30 03:37:03 Vassi

jQuery Ajax加載和getScript

回答

相關問題