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