使用 jQuery 预加载带有图像的内容

Question

我在 jQuery 中使用 .load() 加载 html 内容，但在此内容中嵌入了 3/4 图像。成功事件仅在加载所有 html 而不是实际图像时在 .load() 上触发，有谁知道预加载页面完整内容的方法吗？

$('#ajax_loader').hide().load('page.html',function(){
  $(this).fadeUp(1000);
});

这是我的简单代码（其余部分在完整的应用程序中），加载以下代码（即 page.html）

<div>
  <div id="slideshow">
    <img src="images/img1.jpg" />
    <img src="images/img2.jpg" />
    <img src="images/img3.jpg" />
  </div>
  <p>This is some sample content</p>
</div>

Answer 1

我建议您在图像加载后不要使用 fadeIn 动画，因为它会带来性能下降。通常最好淡入内容，然后开始加载图像，以确保动画对于尽可能多的用户来说是流畅的。

话虽如此，如果你想坚持下去，当然可以实现你最初的目标：
使用 1x1 空白图像作为图像 src 属性，并将真实 URL 存储在 title 中。

<div>
  <div id="slideshow">
    <img src="blank.gif" title="images/img1.jpg" />
    <img src="blank.gif" title="images/img2.jpg" />
    <img src="blank.gif" title="images/img3.jpg" />
  </div>
  <p>This is some sample content</p>
</div>

你的代码变成：

$('#ajax_loader').hide().load('page.html', function(){
  var c = 0;
  var images = $("#slideshow img");
  images.load(function(){
    if (++c == images.length) {
      $('#ajax_loader').fadeIn(1000);
    }
  });
  images.each(function(){
    this.src = this.title;
  });
});

Answer 2

这些图像是通过单独的 HTML 请求加载的，显然，在解析响应中的 HTML 之前，浏览器甚至无法开始加载它们。

如果您在加载内容之前知道图像的 URL，则可以通过创建“Image”元素并等待它们加载（即，通过单独处理它们的“load”事件）来预加载它们。

var imgUrls = [ "images/img1.jpg", "images/img2.jpg", "images/img3.jpg" ];
var c = 0;

for (var i = 0; i < imgUrls.length; ++i) {
  var img = new Image();
  img.onload = function() {
      c += 1;
      if (c == imgUrls.length) {
        // at this point all images are loaded
        // ...
      }
  };
  img.src = imgUrls[i];
}

编辑 — @galambalazs 指出处理程序周围的闭包（在本例中）是不必要的。

Answer 3

查看 这种类似的情况

似乎对您的问题的主要修复是正确的使用 .ready 和 .load 运算符。如果使用得当，您可以等到所有元素和媒体项都加载到浏览器中，然后再将响应传递到其处理程序。我不想抄袭太多:)这是一个非常好的答案。