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

我在jQuery中使用.load（）加载html内容，但在该内容中嵌入了3/4个图像。成功事件仅在加载所有html而不是图像时在.load（）上触发，有人知道如何预加载页面的全部内容吗

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

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

这是一些示例内容

图像是用单独的HTML请求加载的，很明显，在解析响应中的HTML之前，浏览器甚至无法开始加载它们

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

var-imgUrls=[“images/img1.jpg”、“images/img2.jpg”、“images/img3.jpg”]；
var c=0；
对于（变量i=0；i

---

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

图像是用单独的HTML请求加载的，很明显，在响应中的HTML被解析之前，浏览器甚至无法开始加载它们

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

var-imgUrls=[“images/img1.jpg”、“images/img2.jpg”、“images/img3.jpg”]；
var c=0；
对于（变量i=0；i

edit-@galambalazs指出，处理器周围的闭包（在本例中）是不必要的。

请检查

看来解决问题的主要方法是正确使用

.ready

和

.load

操作符。如果使用正确，您可以等到所有元素和媒体项都加载到浏览器中后，再将响应传递给其处理程序。我不想太麻烦：）这是一个非常好的答案。

请查看

---

看来解决问题的主要方法是正确使用

.ready

和

.load

操作符。如果使用正确，您可以等到所有元素和媒体项都加载到浏览器中后，再将响应传递给其处理程序。我不想太麻烦：）这是一个非常好的答案。

我建议在加载图像后不要使用

fadeIn

动画，因为它会导致性能下降。通常，最好是

fadeIn

内容，然后开始加载图像，以确保动画对尽可能多的用户平滑

话虽如此，如果你想坚持下去，当然可以实现你原来的目标：
使用1x1空白图像作为图像

src

属性，并将真实url存储在

标题中

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

我建议在加载图像后不要使用
fadeIn
动画，因为它会导致性能下降。通常，最好是
fadeIn
内容，然后开始加载图像，以确保动画对尽可能多的用户平滑

话虽如此，如果你想坚持下去，当然可以实现你原来的目标：

使用1x1空白图像作为图像
src
属性，并将真实url存储在
标题中

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

所以我可以把这个脚本放在我正在加载的页面上，然后在我触发一个你有评论的内部事件之前不会对内容进行淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡。我的建议是，在执行此操作之前，您应该在调用“.load（）”的页面中执行此操作，因为在操作完成时，浏览器会缓存图像。我不一定要加载整个页面，只加载带有一点标记的图像和文本。我不明白，如果不使用php进行数据库调用，您如何能够找到图像的URL。是的，我同意。但是，如果您正在加载一个片段，那么除了作为ajax调用一部分的成功事件之外，不会有“加载”事件。这些图像都加载了单独的HTTP请求（因为
标记就是这样工作的）。我想，当所有图像上的“complete”属性为真时，您可以使用间隔计时器或其他方法来检查。您的总体目标是什么？@Pointy-没有必要将事件处理程序包装为立即执行的函数，因为
c
和
imgUrls
都可以在它们之间共享。出于同样的原因，在循环中生成单个函数是一种不必要的开销。因此，我可以将此脚本放在我正在加载的页面上，然后在您有注释的页面中触发事件之前，不会对内容进行淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入用于将页面片段加载到现有DOM中。我的建议是，在执行此操作之前，您应该在调用“.load（）”的页面中执行此操作，因为在操作完成时，浏览器会缓存图像。我不一定要加载整个页面，只加载带有一点标记的图像和文本。我不明白你怎么能在没有数据库调用的情况下找到图像的URL
<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;
  });
});