用jQuery预加载图像内容

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

已邀请:

3 个回复

淑灯

我建议您不要在加载图像后使用ѭ2动画，因为它会导致性能下降。通常，将内容“ 2”，然后开始加载图像，以确保动画对于尽可能多的用户而言是平滑的，这是一个好主意。话虽如此，如果您坚持下去，那么您当然可以实现最初的目标：使用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;
  });
});

哭木算

图像加载有单独的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指出，在此情况下，不需要关闭处理程序。

辟官陡板休

看看这种类似的情况看来，解决您问题的主要方法是正确使用.ready和.load运算符。如果使用得当，您可以等到将所有元素和媒体项加载到浏览器中，然后再将响应传递到其处理程序。我不想花太多的力：)，这是一个非常好的答案。

要回复问题请先登录或注册

用jQuery预加载图像内容

3 个回复

发起人

image_preloader

ajax

preloading

javascript

jquery

问题状态

用jQuery预加载图像内容

与内容相关的链接

3 个回复

发起人

image_preloader

ajax

preloading

javascript

jquery

问题状态