7

我有一个托管在 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 自己的缩略图预加载脚本。

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

干杯

4

2 回答 2

2

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

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

实际上，您实际上是通过使用来减慢页面速度window.load......因为预加载稍后开始，当它可以与浏览器更早的其他下载并行时。而是使用document.ready，如下所示：

$(function(){
  $.preLoadImages(
    "/picture/1.jpg",
    "/picture/2.jpg", //etc.
   );
});
于 2010-06-23T01:13:17.760 回答
2

脚本自上而下加载，正文加载通常附加到现有加载 - 所以只要 $(function().. 在页面末尾，它将最后运行。（最后（根据尼克的评论） ) 表示文档的初始解析/运行)

于 2010-06-23T01:13:23.730 回答