动画图片预加载

Posted 2020-09-07 RachelChen

 我们想要动画，但是在很多时候都是要先加载元素图片之后才能进行动画，有时候更惨的是图片加载一半或者一部分就进行了动画。如何解决？？

##问题：平行事件（parallel Events）

当我们在加载一个网站的时候，浏览器为了提高速度，浏览器会在加载和渲染html以及css的同事加载起来的内容，例如图片。

这种加载模式意味着我们可更快的看到一些页面的布局和文本内容，但是如果你创建了一个巨大的，杂志风格（通常需要很多大图）的头部的话，图片不会及时加载。

 

##load事件和动画执行状态

浏览器提供了便捷的load事件，在网页内容完成加载之后触发。这个事件会触发所有的元素，包括图片和脚本。我们可以使用load来控制我们的动画执行。

我们对于load事件添加一些监听，且使用animation-play-state来停止我们的动画，直到event执行完毕。

下面的js显示了这个trick

document.body.className += " js-loading";
window.addEventListener("load", removeLoadingClass, false);
function removeLoadingClass() {
  document.body.className = document.body.className.replace("js-loading","");
}

 上面，第一行则更加了js-loading类别到body元素中，然后创建了一个事件监听。

这个事件监听直到load时间发生的时候才会触发，然后运行removeLoadingClass函数，此时，所所有的图片和其他的加载项（script脚本等）都已经加载完成。

最后，removeLoadingClass函数从body元素中删除了js-loading类

上面的代码必须卸载html中间，如果这部分代码是从外部文件加载进来，那么css可以在这个代码执行之前加载和解析，也就意味着动画可以在我们没有准备好的情况下执行。

让我们使用上面的函数来进行任何的一页动画，动画将在内容准备完成之后进行。

 

##等待图片

// Adjust the "querySelector" value to target your image
var img = document.querySelector("img");
document.body.className += " js-loading";
img.addEventListener("load", removeLoadingClass);
function removeLoadingClass() {
  document.body.className = document.body.className.replace("js-loading","");
}

 

##animation-paly-state属性

现代浏览器支持animation-play-state属性。这个属性告诉了浏览器是否将进行当前的动画还是停止当前的动画。默认值是running，也就是运行。

 

我们可以使用这个属性，在我们加载内容的时候来停止我们的动画。

css里面增加如下内容：

.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

 上面的代码设置了所有元素的play state是停止，不管body有木有js-loading类别。

 这同时也确保了上述停止可以作用在所有的pseudo-element中（：before和：after生成的content）

当js移除body标签中的js-loading类时，动画将不会停止，将按照默认值（running）进行。

##如果js失败了怎么办？

有时候js会失败，这是不可避免的。

如果js不加载运行，那么它将不会给body标签添加js-loading类，也就意味着将动画将自动进行，不管图片是否加载完毕。

虽然讲图片最为背景加载，效果看上去会有些奇怪，但是这是一个reasonable的回退。

##效果运行：

html

<header class="animated-header">
  <div class="loading">Waiting for "load" event...</div>
  <div class="logo">
    <svg width="200px" height="200px" viewBox="0 0 474 474" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Button-Fill-White" fill="#FFFFFF">
                <polygon id="Fill-2" points="115.9512 215.668 115.9512 257.739 147.4012 236.704"></polygon>
                <polygon id="Fill-3" points="224.5024 185.1304 224.5024 126.5024 126.0154 192.1554 170.0094 221.5854"></polygon>
                <polygon id="Fill-4" points="348.1309 192.1553 249.6429 126.5023 249.6429 185.1303 304.1399 221.5853"></polygon>
                <polygon id="Fill-5" points="126.0151 281.252 224.5021 346.905 224.5021 288.276 170.0101 251.83"></polygon>
                <polygon id="Fill-6" points="249.6426 288.2764 249.6426 346.9054 348.1306 281.2524 304.1396 251.8304"></polygon>
                <polygon id="Fill-7" points="237.0713 206.9663 192.6143 236.7033 237.0713 266.4413 281.5313 236.7033"></polygon>
                <g id="Group-12">
                    <polygon id="Fill-10" points="358.1943 257.7393 358.1943 215.6683 326.7493 236.7033"></polygon>
                    <path d="M383.3311,281.2676 C383.3311,281.8216 383.2921,282.3676 383.2191,282.9136 C383.1921,283.0906 383.1491,283.2756 383.1191,283.4526 C383.0541,283.8066 382.9921,284.1606 382.8991,284.5066 C382.8461,284.7146 382.7691,284.9136 382.7031,285.1146 C382.6031,285.4216 382.5041,285.7306 382.3811,286.0386 C382.2961,286.2456 382.1911,286.4456 382.1001,286.6456 C381.9651,286.9306 381.8261,287.2066 381.6731,287.4846 C381.5601,287.6766 381.4341,287.8696 381.3141,288.0616 C381.1451,288.3236 380.9731,288.5776 380.7841,288.8236 C380.6451,289.0156 380.5031,289.1926 380.3501,289.3696 C380.1531,289.5996 379.9451,289.8306 379.7261,290.0456 C379.5601,290.2156 379.3981,290.3846 379.2261,290.5386 C378.9991,290.7466 378.7571,290.9466 378.5111,291.1386 C378.3251,291.2856 378.1411,291.4316 377.9441,291.5696 C377.8721,291.6166 377.8071,291.6776 377.7331,291.7236 L244.0461,380.8516 C241.9341,382.2596 239.5061,382.9666 237.0711,382.9666 C234.6441,382.9666 232.2121,382.2596 230.1001,380.8516 L96.4091,291.7236 C96.3391,291.6776 96.2741,291.6166 96.2051,291.5696 C96.0081,291.4316 95.8201,291.2856 95.6351,291.1386 C95.3891,290.9466 95.1501,290.7466 94.9231,290.5386 C94.7501,290.3846 94.5851,290.2156 94.4191,290.0456 C94.2001,289.8306 93.9971,289.5996 93.7921,289.3696 C93.6461,289.1926 93.5001,289.0156 93.3621,288.8236 C93.1771,288.5776 93.0001,288.3236 92.8341,288.0616 C92.7071,287.8696 92.5881,287.6766 92.4731,287.4846 C92.3191,287.2066 92.1811,286.9306 92.0461,286.6456 C91.9501,286.4456 91.8531,286.2456 91.7651,286.0386 C91.6421,285.7306 91.5381,285.4216 91.4421,285.1146 C91.3731,284.9136 91.3041,284.7146 91.2461,284.5066 C91.1531,284.1606 91.0921,283.8066 91.0261,283.4526 C90.9961,283.2756 90.9501,283.0906 90.9261,282.9136 C90.8531,282.3676 90.8111,281.8216 90.8111,281.2676 L90.8111,192.1396 C90.8111,191.5856 90.8531,191.0396 90.9261,190.5006 C90.9501,190.3166 90.9961,190.1396 91.0261,189.9546 C91.0921,189.6006 91.1531,189.2466 91.2461,188.9006 C91.3041,188.6926 91.3731,188.4926 91.4421,188.2926 C91.5381,187.9846 91.6421,187.6776 91.7651,187.3766 C91.8531,187.1696 91.9501,186.9616 92.0461,186.7616 C92.1811,186.4766 92.3191,186.1996 92.4731,185.9306 C92.5881,185.7306 92.7071,185.5386 92.8341,185.3456 C93.0001,185.0846 93.1771,184.8306 93.3621,184.5836 C93.5001,184.3996 93.6461,184.2146 93.7921,184.0386 C93.9971,183.8076 94.2001,183.5766 94.4191,183.3606 C94.5851,183.1916 94.7501,183.0226 94.9231,182.8686 C95.1501,182.6606 95.3891,182.4606 95.6351,182.2676 C95.8201,182.1216 96.0081,181.9756 96.2051,181.8376 C96.2741,181.7906 96.3391,181.7296 96.4091,181.6836 L230.1001,92.5556 C234.3241,89.7396 239.8211,89.7396 244.0461,92.5556 L377.7331,181.6836 C377.8071,181.7296 377.8721,181.7906 377.9441,181.8376 C378.1411,181.9756 378.3251,182.1216 378.5111,182.2676 C378.7571,182.4606 378.9991,182.6606 379.2261,182.8686 C379.3981,183.0226 379.5601,183.1916 379.7261,183.3606 C379.9451,183.5766 380.1531,183.8076 380.3501,184.0386 C380.5031,184.2146 380.6451,184.3996 380.7841,184.5836 C380.9731,184.8306 381.1451,185.0846 381.3141,185.3456 C381.4341,185.5386 381.5601,185.7306 381.6731,185.9306 C381.8261,186.1996 381.9651,186.4766 382.1001,186.7616 C382.1911,186.9616 382.2961,187.1696 382.3811,187.3766 C382.5041,187.6776 382.6031,187.9846 382.7031,188.2926 C382.7691,188.4926 382.8461,188.6926 382.8991,188.9006 C382.9921,189.2466 383.0541,189.6006 383.1191,189.9546 C383.1491,190.1396 383.1921,190.3166 383.2191,190.5006 C383.2921,191.0396 383.3311,191.5856 383.3311,192.1396 L383.3311,281.2676 Z M237.0711,0.1546 C106.4341,0.1546 0.5251,106.0596 0.5251,236.7036 C0.5251,367.3486 106.4341,473.2486 237.0711,473.2486 C367.7161,473.2486 473.6201,367.3486 473.6201,236.7036 C473.6201,106.0596 367.7161,0.1546 237.0711,0.1546 L237.0711,0.1546 Z" id="Fill-8"></path>
                </g>
            </g>
        </g>
    </svg>
  </div>
</header>

 css：

 

/* The magic here that makes animations wait */ 
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}

.animated-header {
  background: #000;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.animated-header:before {
  animation: show-background 60s .5s cubic-bezier(0,1,.5,1) forwards;
  background: url(https://cssanimation.rocks/images/random/space.jpg) no-repeat center;
  background-size: cover;
  content: "";
  opacity: 0;
  height: 100vh;
  position: absolute;
  width: 100vw;
}

.logo, .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading {
  color: #aaa;
  font-size: 48px;
  display: none;
}

.js-loading .loading {
  display: block;
}

.logo svg {
  animation: show-logo 2s 1.5s cubic-bezier(0,1.79,.28,.73) forwards;
  opacity: 0;
}

@keyframes show-background {
  0% {
    opacity: 0;
    transform: none;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(2)
  }
}

@keyframes show-logo {
  0% {
    opacity: 0;
    transform: scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

 

 js：

document.body.className += " js-loading";

window.addEventListener("load", showPage, false);

function showPage() {
  document.body.className = document.body.className.replace("js-loading","");
}

 

 可以去除js以及清除图片缓存看看不同效果（也就是js不能运行下的reasonable 回退）

 

##加载spinner

如果你不想在刚开始加载的时候呈现空白页面，那么你应该显示一些加载字样或者动画来让用户知道你的页面正在加载。这取决于你认为加载延迟可以设置成多长时间。

如果你有一个超巨大的图片要加载，且页面等待的时间超过1或者2秒，那么可以选用spinner（实际上就是一个加载动画）。如图：

 

你还可以压缩图片或者将图片缩小来提高加载速度。

在上述方法中寻找最适合你的方法。

 

原文：https://css-tricks.com/making-animations-wait/#more-253223