正文

页面加载完毕后用jQuery执行函数的实用技巧

/0 浏览量
0419

在网页开发中，确保页面上的所有元素都加载完毕后再执行特定的函数是非常重要的。jQuery 提供了多种方法来实现这一点，以下是一些实用的技巧：

1. 使用 $(document).ready()

这是最常用的方法，用于确保 DOM 完全加载后再执行函数。

$(document).ready(function() {
    // 这里的代码会在文档加载完成后执行
    console.log('页面加载完毕！');
});

1.1. 嵌套使用 .ready()

你可以在 .ready() 函数内部再嵌套一个 .ready()，这样可以在页面加载完成后执行多个操作。

$(document).ready(function() {
    console.log('页面加载完毕！');
    // 执行其他操作
});

2. 使用 $(window).on('load', function() { ... })

$(window).on('load', function() { ... }) 事件会在页面上所有资源（包括图片、CSS、脚本等）完全加载后触发。

$(window).on('load', function() {
    console.log('所有资源加载完毕！');
});

2.1. 区分 load 和 ready

  • ready：DOM树加载完成后就触发，无需等待样式表、图片和子框架完成加载。
  • load：等待整个页面包括所有依赖资源都加载完成后触发。

3. 使用 $(selector).on('DOMContentLoaded', function() { ... })

DOMContentLoaded 事件在初始的 HTML 文档被完全加载和解析完成后触发，不需要等待样式表、图片和子框架完成加载。

$(document).on('DOMContentLoaded', function() {
    console.log('DOM树加载完毕！');
});

3.1. 性能考虑

  • DOMContentLoaded 通常比 $(document).ready() 快，因为它不等待样式表、图片和子框架加载。
  • 如果需要等待这些资源，使用 load 事件会更合适。

4. 使用 $.ajaxStart() 和 $.ajaxStop()

如果你有多个异步请求，可以使用 $.ajaxStart() 和 $.ajaxStop() 来控制函数的执行。

$(document).ready(function() {
    $(document).ajaxStart(function() {
        console.log('开始发送AJAX请求');
    });

    $(document).ajaxStop(function() {
        console.log('所有AJAX请求完成');
    });
});

5. 使用 CSS 选择器

jQuery 允许你使用 CSS 选择器来选择元素，并在元素加载完成后执行函数。

$(document).ready(function() {
    $('#myElement').on('load', function() {
        console.log('我的元素加载完毕！');
    });
});

总结

选择合适的技巧取决于你的具体需求。如果你只需要在 DOM 树加载完成后执行函数，使用 $(document).ready() 或 $(document).on('DOMContentLoaded', function() { ... }) 就足够了。如果你需要等待所有资源加载完成，使用 $(window).on('load', function() { ... })。希望这些技巧能帮助你更好地使用 jQuery。

-- 展开阅读全文 --