在所有其他 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.
   );
});

Answer 2

脚本从上到下加载，主体加载通常附加到现有加载 - 因此只要 $(function().. 位于页面末尾，它就会最后运行。（最后（根据尼克的评论）意味着文档的初始解析/运行）