最近因为站点的原因，添加了 Ajax 加载，采取的措施都是局部加载，除了顶部、侧边栏和底部以外，剩下的其余作为局部加载的区域。主页、分类页、标签页、归档页、搜索页和文章页都做出了不同程度的加载，当中文章页涉及的东西比较多，在回调函数中需要为前端的插件添加该插件所属的 js 和 css 文件，另外歌曲列表播放器最麻烦，要寻找相关的 js 和 css，另外还需要 JQuery 库和自定义播放器外观的 Css 和默认的播放器 Css 支持，黏贴两段代码：

下面的代码主要是使用 jQuery 的 AJAX 技术实现了网页的异步加载，具体的实现过程如下：

1. 当文档加载完成后，定义一个函数来处理 AJAX 请求，这个函数将被绑定到文档对象的 ready 事件上。
2. 在函数内部，首先获取当前链接的 URL，然后隐藏包含 class 为 mytheme-pagination 和 mytheme-posts-container 的元素。
3. 接着，添加一个 loading 元素用于显示加载效果，并将其隐藏。
4. 通过 AJAX 请求获取数据和内容，请求的 URL 为上一步获取的链接 URL，请求方式为 POST。
5. 在 AJAX 请求发送之前，显示加载效果，以提示用户正在加载数据。
6. 如果 AJAX 请求成功，就将返回的数据转换为 jQuery 对象，并获取其中 class 为 mytheme-posts-container 和 mytheme-pagination 的元素的 HTML 内容，并将其插入到对应的 DOM 元素中。
7. 使用 jQuery 的 getScript() 方法来异步加载三个脚本文件，这些文件都是在 AJAX 请求成功后才加载的。
8. 显示包含 class 为 mytheme-pagination 和 mytheme-posts-container 的元素。
9. 在 AJAX 请求完成后，隐藏加载效果，并使用 window.history.pushState() 方法来改变当前页面的 URL。
10. 最后使用 jQuery 的 animate() 方法将页面滚动到包含 class 为 mytheme-posts-container 的元素的顶部位置。

总的来说，这段代码的作用是在 WordPress 网站上实现了异步加载数据和内容，提高了用户的体验和网站的性能。同时还使用了一些 JavaScript 和 jQuery 的技巧，如获取 DOM 元素、动态加载脚本等，该代码应用在文章页以外的页面。

// JavaScript Document
jQuery(document).ready(function ($) {
  var url = $(this).attr('href');

  // 添加 .mytheme-pagination 和 .mytheme-posts-container 隐藏功能
  $('.mytheme-pagination, .mytheme-posts-container').hide();

  // 添加加载效果的 HTML 元素，并将其隐藏
  var loadingElement = '<div class="mytheme-loading" style="display:none;"><img alt="loading" src="https://web2go.us/wp-content/themes/Web2go_v2/images/loading.gif"></div>';
  $('.mytheme-posts-container').parent().append(loadingElement);

  $.ajax({
    url: url,
    type: 'POST',
    beforeSend: function () {
      // 在 AJAX 请求期间显示加载效果
      $('.mytheme-loading').show();
    },
    success: function (data) {
      var $data = $(data);
      var posts = $data.find('.mytheme-posts-container').html();
      var pagination = $data.find('.mytheme-pagination').html();
      var pageTitle = $data.filter('title').text();

      // 加载 zilla-likes.js 脚本，并在加载完成后初始化
      $.getScript("https://web2go.us/wp-content/plugins/zilla-likes-master/scripts/zilla-likes.js", function () {
        //eslint-disable-next-line no-console
        console.log("zilla-likes loaded");
      });

      $.getScript("https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js", function () {
        //eslint-disable-next-line no-console
        console.log("jquery loaded");
      });

      $.getScript("https://web2go.us/wp-content/plugins/wp-rocket/assets/js/lazyload/16.1/lazyload.min.js", function () {
        //eslint-disable-next-line no-console
        console.log("lazyload loaded");
      });
      $('.mytheme-posts-container').html(posts);
      $('.mytheme-pagination').html(pagination);

      // 显示 .mytheme-pagination 和 .mytheme-posts-container
      $('.mytheme-pagination, .mytheme-posts-container').show();

      // 在 AJAX 请求完成后隐藏加载效果
      $('.mytheme-loading').hide();

      window.history.pushState({
        url: url,
        title: pageTitle
      }, pageTitle, url);
    },
    error: function (jqXHR, textStatus, errorThrown) {
      // eslint-disable-next-line no-console
      console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
    }
  });

  $('html, body').animate({
    scrollTop: $('.mytheme-posts-container').offset().top
  }, 0);
});

下面的代码使用 jQuery 库实现了动态加载多个 JavaScript 文件和样式表文件。首先，它定义了需要加载的文件链接。然后，它定义了一个函数，loadFiles，用于加载这些文件。在这个函数中，它迭代文件链接列表中的每个文件，并为它们创建一个 script 或 link 元素，并将其添加到文档头部中。在每个元素加载完成时，它会调用一个回调函数，以便在所有元素加载完成后执行一些操作。

接下来，它定义了另一个函数，onReady，当所有文件都已加载时将执行该函数。这个函数主要用于调整页面元素的样式，以适应所加载的媒体元素播放器。在这个函数中，它使用 jQuery 选择器选取了一些元素，并设置它们的 CSS 属性。

最后，它使用 jQuery 的 AJAX 方法从一个 URL 获取数据。在 AJAX 请求成功后，它会将响应数据中的 HTML 代码提取出来，替换到页面中的一个元素中，并在加载所有文件后执行 onReady 函数。如果请求失败，它会将错误消息显示在页面中。这段代码只应用到文章页 Single.php

jQuery(document).ready(function($) {
  // 定义所有需要加载的文件链接
  var fileUrls = [
	'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js',
//这里添加涉及到的插件的 css  和 js 文件的地址
  ];

  // 加载 JavaScript 和样式表文件
  function loadFiles(urls, callback) {
    var loaded = 0;
    var total = urls.length;

    function onLoad() {
      loaded++;
      if (loaded === total) {
        callback();
      }
    }

    function onError(url) {
      console.error('Failed to load file:', url);
      loaded++;
      if (loaded === total) {
        callback();
      } else {
        loadFile(url);
      }
    }

    function loadFile(url) {
      if (/\.css$/.test(url)) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = url;
        link.onload = onLoad;
        link.onerror = function() {
          onError(url);
        };
        document.head.appendChild(link);
      } else {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = url;
        script.async = true;
        script.onload = onLoad;
        script.onerror = function() {
          onError(url);
        };
        document.head.appendChild(script);
      }
    }

    urls.forEach(loadFile);
  }

  // 加载完成后执行操作
  function onReady() {
    $('iframe').css({
      'width': '100%',
      'height': '100%',
      'position': 'absolute',
      'top': '0',
      'left': '0',
    });
    $('.media-box').css({
      'width': 'auto',
      'height': 'auto',
      'position': 'relative',
      'padding-bottom': '56.25%',
    });
    // 防止媒体元素播放器大小变化
    $('video').mediaelementplayer({
      enableAutosize: false
    });
  }

  // 发送 AJAX 请求
  var url = $(this).attr('href');
  $.ajax({
    type: 'POST',
    url: url,
    beforeSend: function() {
      $('.single-post').hide().after('<div class="mytheme-loading"><img alt="loading" src="https://web2go.us/wp-content/themes/Web2go_v2/images/loading.gif"></div>');
    },
    success: function(data) {
      var $data = $(data);
      var posts = $data.find('.single-post').html();
      $('.single-post').html(posts).show();

      $('html, body').animate({
        scrollTop: $('.single-post').offset().top
      }, 0);

      // 加载所有文件并执行操作
      loadFiles(fileUrls, onReady);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.error('Failed to load data:', textStatus, errorThrown);
      $('.single-post').html('Failed to load data. Please try again.').show();
    }
  });
});

后记：Ajax 加载为什么影响其他 Js Css？

当使用 Ajax 加载内容时，它会动态地向当前页面添加新的 HTML 元素，这些元素可能需要依赖其他的 JS 和 CSS 文件进行正确的渲染和交互。如果这些文件没有被正确加载，那么这些新添加的元素可能无法正常显示或者交互，因为这些元素所需要的 JS 和 CSS 功能缺失。所以在这段代码中，通过使用 loadFiles() 函数加载了所有需要的 JS 和 CSS 文件，以确保新添加的元素能够正常地渲染和交互。这是为了保证网页的整体功能和样式的一致性。

我们该怎么做？

1. 避免重复加载：在进行 AJAX 加载之前，先检查所需的 JavaScript 和 CSS 文件是否已经被加载，如果已经加载过了，就不要重复加载。
2. 限定加载范围：对于某些比较特定的功能，可以在加载前确定加载的范围，只加载需要的文件，而不是全部文件。
3. 加载完毕后再执行：为了避免 AJAX 加载过程中对页面的干扰，可以等到 AJAX 加载完毕后再执行需要的 JavaScript 代码，这样可以保证代码的执行时机和正确性。
4. 使用命名空间：对于一些比较常见的 JavaScript 库，可以使用命名空间来避免命名冲突，这样即使被加载了多次，也不会产生问题。

总之，避免 AJAX 加载影响其他 JavaScript 和 CSS 文件的关键在于：合理地管理加载过程，限定加载范围，确保加载顺序和正确性，以及使用命名空间来避免命名冲突。