jQuery頁面載入完成後執行

一、頁面載入完成事件

當頁面中所有的元素都載入完成後，我們需要執行一些腳本來實現一些交互的效果。在jQuery中，我們可以使用一個window的事件來監控頁面是否載入完成，這個事件就是load事件。 當頁面中所有的元素都載入完成後，我們需要執行一些腳本來實現一些交互的效果。在jQuery中，我們可以使用一個window的事件來監控頁面是否載入完成，這個事件就是load事件。

$(window).on('load', function(){
      // 頁面所有元素載入完成後執行
});

除了window的load事件之外，jQuery 還提供了一個ready事件，這個事件會在DOM 樹構建完成後立即觸發，而無需等待其他資源的載入完成。

$(document).ready(function(){
      // DOM 構建完成後執行
});

二、延遲載入的執行

頁面中有些元素需要在頁面載入完成後才能執行，但是有時候元素的載入需要時間，此時需要延遲元素執行。在jQuery中，我們可以使用一個叫做setTimeout的函數來實現。

$(window).on('load', function(){
      setTimeout(function(){
             // 延遲要執行的代碼
      }, 1000);
});

上面的代碼中，setTimeout中的第一個參數是要延遲執行的函數，第二個參數是延遲的時間（單位是毫秒），1秒等於1000毫秒。

三、Ajax載入完成後執行

在頁面中經常會用到Ajax非同步載入內容，在非同步載入完成後需要執行某些腳本來操作非同步內容。在jQuery中，我們可以使用一個叫做ajaxComplete事件來實現。

$(document).ajaxComplete(function(){
      // 非同步載入完成後要執行的代碼
});

上面的代碼中，ajaxComplete事件會在每次Ajax請求完成後觸發，我們可以在事件中寫需要執行的腳本。

四、圖片載入完成後執行

在頁面中有些圖片需要載入完成後才能正常顯示，此時需要等待所有圖片載入完成後再執行某些腳本。在jQuery中，我們可以使用一個叫做imagesLoaded插件來實現。

$('img').imagesLoaded().progress( function( instance, image ) {
    // 圖片載入完成後，要執行的代碼
});

上面的代碼中，我們使用了imagesLoaded插件監聽了所有圖片載入的進度，當所有圖片都載入完成後，就會觸發progress回調函數，然後在回調函數中寫需要執行的腳本。

五、插件式的封裝

為了使我們的代碼更加簡潔和復用性更強，我們可以將常用的代碼封裝成插件的形式，以後在需要的地方引入即可。以下是一個簡單的例子：

(function($) {
   $.fn.showContent = function() {
       // 要封裝的代碼
   }
}(jQuery));

// 在其他地方引入
$('selector').showContent();

上面的代碼中，我們使用了一個自執行的匿名函數，將需要封裝的代碼放在了裡面，然後將這個函數綁定到了jQuery的命名空間下，成為了一個名為showContent的插件。在其他地方需要使用的時候，只需要調用$(selector).showContent()即可。