ここで同様の問題に対してさまざまな解決策を試しましたが、どれも私のために何もしていないようです。私の jsFiddle を参照して、私が実現したいことの例を確認してください: http://jsfiddle.net/Amp3rsand/HSNY5/6/
それは私が望む方法でアニメーション化しますが、画像の読み込みが完了したらすぐに起動したい場合は .delay に依存します。js のコメントアウトされたセクションは、私が試したことです。
問題は、画像が実際には独自の要素ではなく div の背景であるということでしょうか? 独自の<img>タグもテストしましたが、違いはないようです。メディアクエリを使用するときに、モバイルユーザーや小さな画面用に別の小さな画像に簡単に交換できるように、画像を背景として使用しています。
HTML:
<header></header>
<div id="image">
<div id="blah"></div>
</div>
読み込みが完了した後に発射したい画像は、「#image」の背景です。次に、「不透明度：1;」にアニメーション化したいと思います。「#blah」と「header」は所定の位置にアニメーション化されます。
これは私が現在使用しているjQueryですが、正しくありません：
$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);
私のウェブサイトでは非常に大きな画像なので、読み込みに約 0.5 秒かかりますが、このコードではキャッシュやさまざまなネットワーク速度が考慮されていません。
私は何を間違っていますか、または何を別の方法で行う必要がありますか?
みんな、ありがとう
編集：
imagesLoaded プラグインを以前に試してみましたが、私の Web サイトでは動作しているように見えますが、実際に自分のコードをエミュレートしているのか、それとも上記のコードをエミュレートしているのかわかりません。
$(document).ready(function() {
$('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
$('article').hide().fadeTo(600, 1);
$('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});
'#homeimg' は画像を背景とする div であり、'article' は '#homeimg' と '#caption' のコンテナーです。
現時点ではローカルにロードされた Web サイトでのみテストできるため、低速の接続をシミュレートすることはできません。上記のコードは私が探しているものを実行しますか? 明らかな場合は申し訳ありません