javascript - 在所有其他 javascript 运行之后如何运行 jQuery 函数

Question

我有一个托管在 CMS (Squarespace) 上的照片库页面，它有一些自己的脚本可以异步加载缩略图。

然而，实际的大图像并没有预加载，所以我决定将自己的脚本添加到混合中，让浏览器在后台将这些大图像加载到缓存中，如下所示:

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

$(window).load(function(){
$.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});

我将我的代码放在 $(window).load() 中，因为这是一个后台脚本，它根本不需要运行，它只是为了提高性能。

但是，我认为这个脚本以某种方式阻止了 CMS 自己的缩略图预加载脚本。

我说的对吗？最重要的是，有没有办法规定我的脚本仅在页面上的所有其他脚本运行后运行？

干杯

Answer 1

JavaScript 始终在运行，例如 hover 事件不断触发，mousemove 等...脚本运行没有“结束”。

但是在您的情况下，这不应阻止任何其他预加载...您也可以在此处使用 document.ready，因为您实际上不需要在代码执行之前加载图像。

事实上，您实际上是在通过使用 window.load 来减慢页面速度...因为预加载稍后开始，此时它可以与浏览器较早的其他下载并行。而是使用 document.ready，像这样:

$(function(){
  $.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});