Question

我找到了这段代码，它对于预加载很有用，但它最初完全阻塞了页面加载。我已经尝试了几个小时，只有在页面加载后没有成功才能运行这个东西。我一直在使用一个图像“big_image.jpg”（8MB）来测试它。因此，所有内容都使用以下代码进行预加载，包括大文件。任何时候我试图在文档准备好后预先加载它，它都会失败。我甚至尝试过其他声称可以做我想要的代码，但它们都失败了 - 一旦页面加载，没有人会继续加载真正的大图像。那是什么？

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

// Usage:

$(['picture.jpg','background.jpg','vertical.jpg','big_image.jpg']).preload();

Answer 1

因为你根据我的帮助找到了答案：

您似乎正在使用jQuery。您可以将函数调用包装在ready function内：指定在DOM完全加载时要执行的函数。

function loadImages(){     
  var img1 = "http://farm3.staticflickr.com/2826/11581275325_d61be12908_h.jpg"
  var markup = "<h3>Images after pageload</h2>"+"<img src='"+img1+"' />";
  $("#images").html(markup);
}

$( document ).ready(function() {
  // Handler for .ready() called.
  loadImages();
});

您可以查看我的codepan example

页面加载完成后预加载大图像

1 个答案: