1

我在 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>
4

3 回答 3

3

我建议您不要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;
  });
});
于 2011-06-12T17:13:30.443 回答
2

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

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

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 指出处理程序周围的闭包（在这种情况下）是不必要的。

于 2011-06-12T16:27:09.457 回答
-1

看看这个类似的情况

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

于 2011-06-12T16:37:46.187 回答