javascript - 使用 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 动画，因为它会带来性能下降。 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;
  });
});