Question

我正在网站LINK上工作，由于某种原因，预加载器被破坏了。我正在使用一些可以扩展到任何屏幕的大图像（对于FPS来说很糟糕），因此我使用非常大的图片（使用媒体查询到服务器1440p及以上，以下所有内容都获得1080p图像）。为了防止用户看到空白区域，当图片没有加载时，我使用预加载器固定的全屏div，圆形动画逐渐消失，直到内容被加载。

我所制作的预装载器有两个条件：

固定在屏幕上，直到整个页面加载完毕。然后淡出
屏幕上至少0.5秒，即使页面加载速度比.5s快，然后淡出.5s

这个代码是

$(document).ready(function () {
    setTimeout(function () {
        $('.loading').css('opacity', '0');
    }, 500);
    setTimeout(function () {
        $('.loading').remove();
    }, 1500);
});

CSS for the fixed div in front of the content
.loading {
position:fixed;
top:0;
left:0;
z-index:9999;
width:100%;
height:100%;
background-color:#1abc9c;
transition:.5s;

}

这似乎适用于所有浏览器，但是对于加载页面的Chrome，加载页面后的.5s后，预加载器会闪烁并快速淡出。

如果预加载器可以说话，那么它可能会说Chrome＆＃34;嘿等等，我应该出现在你们面前！好吧，没关系。＆＃34;。

所以无论如何，我正在寻找一个预装载器的合适解决方案：

保持在所有内容之上，直到所有内容（包括背景图像）都已加载，然后
以0.5秒的动画持续时间淡出。
至少留在屏幕上＆＃39;时间为.5秒，即使所有内容的加载速度都快于.5s。

谁可以提供帮助？：）

Answer 1

您应该在您的样式中包含您希望转换的属性（在本例中为opacity或all），并且根据浏览器版本，包含多个浏览器前缀：

.loading {
    transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
}

您也可以使用jQuery以更好的方式获得相同的结果，并删除转换：

$('.loading').delay(500).fadeOut(500, function() {
    $(this).remove();
});

另一点需要指出的是，高分辨率图像不一定会在0.5秒内加载。这是检查图片是否已加载的好方法：SO

已预加载损坏，仅在加载页面后才会显示，仅在Chrome中发生

1 个答案: