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()即可。