動畫圖片預加載

 咱們想要動畫,可是在不少時候都是要先加載元素圖片以後才能進行動畫,有時候更慘的是圖片加載一半或者一部分就進行了動畫。如何解決??

css

##問題:平行事件(parallel Events)html

當咱們在加載一個網站的時候,瀏覽器爲了提升速度,瀏覽器會在加載和渲染html以及css的同事加載起來的內容,例如圖片。瀏覽器

這種加載模式意味着咱們可更快的看到一些頁面的佈局和文本內容,可是若是你建立了一個巨大的,雜誌風格(一般須要不少大圖)的頭部的話,圖片不會及時加載。緩存

 

##load事件和動畫執行狀態dom

瀏覽器提供了便捷的load事件,在網頁內容完成加載以後觸發。這個事件會觸發全部的元素,包括圖片和腳本。咱們可使用load來控制咱們的動畫執行。svg

咱們對於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 

相關文章
相關標籤/搜索