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

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 9 年前。

Improve this 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