JQUERY 加载

在 jQuery 中，加载通常指加载外部资源（如 JavaScript 文件、CSS 文件）或者在页面加载完成后执行某些操作的过程。以下是 jQuery 中常见的加载相关的方法和技术：

加载外部资源

• 加载 JavaScript 文件

可以使用 $.getScript() 方法来动态加载并执行外部的 JavaScript 文件。

$.getScript("path/to/script.js", function() {
    // 加载成功后执行的回调函数
    console.log("Script loaded successfully.");
});

• 加载 CSS 文件

虽然 jQuery 本身没有直接提供加载 CSS 文件的方法，但可以通过 jQuery 动态创建 <link> 元素来加载 CSS 文件。

$("<link>", {
    rel: "stylesheet",
    type: "text/css",
    href: "path/to/styles.css"
}).appendTo("head");

页面加载完成后执行操作

• $(document).ready()

$(document).ready() 是 jQuery 提供的一种在 DOM 树加载完成后执行的方法，通常用于确保 DOM 结构完全加载后再执行 JavaScript 操作。

$(document).ready(function() {
    // 在 DOM 加载完成后执行的操作
    console.log("Document is ready!");
});

简化写法：

$(function() {
    // 等同于 $(document).ready(function() { ... });
    console.log("Document is ready!");
});

• $(window).on("load", function() { ... })

$(window).on("load", function() { ... }) 是在页面及其所有资源（如图片、样式表等）完全加载后执行的方法。

$(window).on("load", function() {
    // 在页面及所有资源加载完成后执行的操作
    console.log("Page and all resources are loaded.");
});

示例应用

• 动态加载外部资源并执行操作：

$(document).ready(function() {
    // 加载外部 JavaScript 文件
    $.getScript("path/to/script.js", function() {
        console.log("Script loaded successfully.");
        // 在加载完成后执行的操作
        initFunction(); // 假设加载的脚本定义了一个名为 initFunction 的初始化函数
    });
    // 动态加载外部 CSS 文件
    $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "path/to/styles.css"
    }).appendTo("head");
});

• 等待页面和所有资源加载完成后执行操作：

$(window).on("load", function() {
    // 页面和所有资源加载完成后执行的操作
    console.log("页面已经加载完毕.");
    // 执行其他初始化操作
});

这些方法和技术使得在使用 jQuery 时能够更加灵活地管理页面的加载和初始化过程，确保在正确的时间点执行需要的操作。