jquery - 画像の読み込み中にテキストを表示する

Question

背景スライダーがいっぱいのウェブサイトを作っているので、画像がちょっと大きいです。背景画像の読み込み中にテキストをアニメーション効果で表示するスクリプトが必要です。私はすでにこれを検索しましたが、成功しませんでした。誰かが私をさらに助けてくれますか?

ありがとう！

Answer 1

テキストをデフォルトで表示し、 で削除します$(img).load()。で好きなようにテキストをアニメーション化します.animate()。画像を変更する場合は、spanLoading再度挿入してこれらの手順を繰り返します。

<div>
    <img src="book.png" alt="Book" id="book" />
    <span id="spanLoading">Loading...</span>
</div>


<script type="text/javascript">
    $(function(){
        //animate loading text
        $("#spanLoading").animate({left: '+=50'},500); 

        //On img loaded, remove loading text
        $("#book").load(){
            $("#spanLoading").remove();
        }
    });
</script>

Answer 2

関数を使用して背景画像を動的にロードする必要があると思います

 $(function()){
   $("#background").attr('src','your_image here');
 }

hTMLコードでアニメーション画像をデフォルトの背景として設定します

それからあなたはあなたの効果を得るでしょう。