jQuery预加载 - 如何淡入图像，而不是弹出它

Question

我已经把一种基本的预加载动画与jQuery一起。你可以在我的网站上看到它element17.com。正如你所看到的，一个预加载动画会一直播放，直到$（window）.load被调用，此时（称为'.loading'）fadeOut（）。

这似乎工作正常，但你会看到它基本上淡出透明，此时正在加载的图像捕捉存在。我该如何设置这个预加载动画才能顺利进入图像？

HTML如下：

<div class="loading" style="height:150px; width:475px; z-index:99955; background:#333 url('plog-content/themes/diffuser/images/loading.gif') no-repeat center center;">&nbsp;</div><div class="slideshow">*IMAGES LOAD HERE VIA PHP*</div>

请原谅联样式，而我测试...：P

谢谢大家！

Answer 1

我曾经在一个项目之前，通过预加载图像，并自动隐藏起来，然后褪色然后做到了这一点。

即

function preloadBackgroundImage(){ 
    $('img[data-preload]').each(function(){ 

     var image = $(this); 
     var filename = image.attr('src'); 
     image.attr('src', ''); 
     image.load(function(){ 
      image.hide(); 
      image.fadeIn(600); 
     }).attr('src', filename); 
    }); 
}