ヘッダーの背景画像のオンロードイベントをアニメートする方法は？

Question

私のヘッダーの背景イメージを読み込み時にアニメートする必要があります。そして、私が行っているこの

.header_area{ 
 
    background-image: url(../img/mobility_solutions.jpg); 
 
    min-height: 100vh; 
 
    background-repeat: no-repeat; \t 
 
    background-size: 100% 100%; 
 
    background-position: center center; 
 
    animation: shrink 3s; 
 
} 
 

 
@keyframes shrink { 
 
    0% {background-size: 110% 110%;} 
 
    100% {background-size: 100% 100%;} 
 
}

これが機能していますが、ページがブラウザに初めてロードされていないとき。どのように私はそれが常にロードイベントで起こるように整列させることができますか？

あなたはそれはあなたがこの画像へのリンクを隠しimgタグを使用することができますhttp://demogenesystel.mywebkitchen.com/

Answer 1

をhere-確認することができます。そして、それが設定された背景URLをロードした後。それはロードが不透明で（たとえばhttps://loading.io/用）のSVGスピナとCSSクラスを使用することができますが：0

//javascript: 
var hiddenImg = $('<img />').addClass('hidden') 
hiddenImg.attr('src', ....) 
hiddenImg.bind('load', function(){ 
    $(this).addClass('show')) 
    var yourTarget = $('..'); 
    yourTarget.css('background-image', 'url(' + your url + ')'); 
}) 
//css 
img.hidden { opacity: 0; } 

PS：あなたはあなたが必要なものこの Javascript callback for knowing when an image is loaded

Answer 2

のためのjQueryを使用する必要はありません使用することです要素のURLをbackground-imageのURLで検出してダミーの<img />タグの一部としてロードすると、onloadイベントをアタッチして同じイメージが正常に読み込まれたかどうかを検出できます。

background-image抽出には、実際にはurl(/path/to/image)文字列全体が返されるため、単純な置き換えが必要になることがあります。別のオプション反転カンマと閉じることによって、その後、間に何が続く

^url\(["']?(.*?)["']?\)$ 

基本的パターンは、オプション反転カンマで、開始時url(と一致しようとし、：したがって、我々は、これが一致するパターンを使用することができブラケット)。最初のキャプチャグループはあなたの背景イメージのURLになります。 You can see how it works here。

この値がある場合、この値にダミーの<img />要素にsrc属性を割り当てます。この要素がloadイベントを発生させると、.header_area要素に対して定義したアニメーションを適用するクラス.header_area--animateを追加します。

もちろん、このロジック全体をJSで記述することはできますが、jQueryにタグが付いているので、なぜですか？ ;）

$(function() { 
 
    $('<img />', { 
 
    src: $('.header_area').css('background-image').replace(/^url\(["']?(.*?)["']?\)$/gi,'$1') 
 
    }).on('load', function() { 
 
    console.log('Image loaded, adding animation'); 
 
    $('.header_area').addClass('header_area--animate'); 
 
    }); 
 
});

.header_area { 
 
    background-image: url("http://deelay.me/1000/http://placehold.it/1000x500"); 
 
    min-height: 100vh; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    background-position: center center; 
 
    
 
} 
 
.header_area--animate { 
 
    animation: shrink 3s; 
 
} 
 

 
@keyframes shrink { 
 
    0% { 
 
    background-size: 110% 110%; 
 
    } 
 
    100% { 
 
    background-size: 100% 100%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header_area"> 
 

 
</div>