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属性，并将真实网址存储在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”元素并等待它们加载（即通过单独处理它们的“加载”事件）来预加载它们。

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

查看this similar situation

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

使用jQuery使用图像预加载内容

3 个答案: