用jQuery预加载图片的内容

我在jQuery中使用.load（）加载html内容，但在这个内容中嵌入了3/4图片。成功事件只会在.load（）全部加载html时触发，而不是实际上的图像，没有人知道预加载页面全部内容的方式吗？用jQuery预加载图片的内容

$('#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>

来源

2011-06-12 benpalmer

'fadeUp'意味着'fadeIn'吧？ – galambalazs 2011-06-12 17:26:17

我建议您在加载图像后不要使用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-12 17:13:30 galambalazs

谢谢你，这工作很好！几乎太好了，现在我们已经在内容之前等了15秒（但那是另一回事）。谢谢你的帮助！ – benpalmer 2011-06-12 21:45:16

的图像加载单独的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指出，各地处理程序的关闭是（在这种情况下）是不必要的。

来源

2011-06-12 16:27:09 Pointy

因此，我可以把这个脚本放在我正在加载的页面上，然后不会淡入内容，直到我在你有意见的地方触发了一个事件。 – benpalmer 2011-06-12 16:39:23

那么，使用“.load（）”加载一个现有DOM中的*整个页面并没有多大意义 - “.load（）”旨在用来将页面的*片段加载到现有的DOM。我的建议是，在做这件事之前，在页面中调用“.load（）”，因为那样浏览器会在操作完成时缓存图片。 – Pointy 2011-06-12 16:46:29

我不一定在整个页面中加载，只是图像和带有一些标记的文本。我不明白你如何能够找到图像的URL，而无需使用php进行数据库调用。 – benpalmer 2011-06-12 16:58:56

-1

退房this similar situation

看来，主要修复您的问题会正确使用.ready和.load运营商。如果使用得当，您可以等到所有元素和媒体项目都加载到浏览器中，然后将响应传递到其处理程序。我不想让太多的东西沾染:)而且它是一个非常好的答案。

来源

2011-06-12 16:37:46

感谢您的回答，但是这似乎并没有涵盖动态加载的DOM元素，只能在主页面请求中加载。 – benpalmer 2011-06-12 16:55:57

用jQuery预加载图片的内容

回答

相关问题