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;"> </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);
    });
}

jQuery预加载 - 如何淡化图像而不是让它们弹出

1 个答案: