1

お時間を割いていただきありがとうございます。

divの背景画像のダウンロードとレンダリングが完了した直後に、jQueryを使用して関数をトリガーする方法があるかどうか疑問に思いました。

あなたがこのdivを持っているとしましょう

<div id="img1" class="img1"> </div>

ここで、img1スタイルは

.img1 {
    background-image: some_big_image.png;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;  
    display: none;
}

このjavascript関数を検討する

function showDiv() {
  $("#img1").fadeIn(1000);
}

画像がレンダリングされた直後に前の関数を呼び出す方法はありますか？レンダリングとは、div内にうまく収まり、表示できるようにサイズ変更されたことを意味します。

ページの読み込み後または画像のダウンロード後に関数をトリガーすることについて多くの情報を見つけましたが、レンダリング後については何も見つかりませんでした。

あなたたちは最高です。前もって感謝します。

4

2 に答える 2

2

試す

var img = new Image();
img.src = "/some_big_image.png";
img.onload = function( ) {
    $("#img1").css("background-image", "url('" + img.src + "')" ).fadeIn(1000);
}

ここでフィドル

于 2012-11-28T13:17:03.973 に答える
0

上記の回答をすでに受け入れていることは知っていますが、jqueryマジック関数を使用するだけでこれを簡単に簡略化できます

$(function() {
    $("#img1").fadeIn(1000);
}

onloadイベントが機能していないと上記で返信しました。$（function（）{//ここにコード}）; domが完全に準備ができたときに起動します（すべてのブラウザーがonloadイベントに対してデフォルトでこれを実行するかどうかはわかりません）。したがって、おそらくそれが問題を抱えていた理由です。また、ページ上の複数の場所と呼ぶことができ、それらを組み合わせることができるので便利です（onloadを直接設定するのではなく、他の場所に設定するとオーバーライドされます）

ここでフィドル：http：//jsfiddle.net/5cR4G/8/

于 2012-11-28T13:17:07.803 に答える