10

さて、タイトルは私の質問をほとんど説明しています：

背景画像が完全に読み込まれた後、背景画像を動的に読み込む方法は? ブラウザがダウンロードするのに時間がかかるほど大きい背景を使用しなければならない場合があります。「バックグラウンドでロード」して、完全にロードされたときにフェードインさせたいと思います。

jQuery を使用するのが最適だと思いますが、JavaScript が無効になっている場合にも背景が表示されるようにしたいと考えています。これが本当に不可能なら、それでいいのですが、可能だと思いますか?

よろしく、 Aart

.........

編集：

ありがとう、みんな！私はこれに何年も悩まされてきましたが、素晴らしく簡単な方法が思いつきませんでした。

jQuery のビルトインのフェードがとても素晴らしいという理由だけで、Jeffrey の Javascript ソリューションを jQuery ソリューションに変換しました。

他の誰かが同じ問題を抱えている場合に備えて、ここに投稿します。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('#img').css('opacity','0').load(function() {
            $(this).animate({
                opacity: 1
            }, 500);
        });
    });

</script>

<img src='yourimage.jpg' id='img'/>
4

6 に答える 6

7

画像がimg要素に含まれている場合:

<img src="bg.jpg" id="img" onload="this.style.opacity='1'">

<script>
    document.getElementById("img").style.opacity="0";
</script>

JavaScript が無効になっている場合、画像は通常どおり読み込まれますが、有効になっていると仮定して一度だけ表示されます。

注意すべきことの 1 つ (私が見落としていたこと): 一部のブラウザーは、displayプロパティがnone. そのため、このメソッドはopacity属性を使用します。

于 2012-04-04T15:03:21.163 に答える
3

JSが無効になっている場合は実行できません。ただし、できることは、CSS で背景画像を設定してから、次のスクリプトを使用することです (要素に ID があると仮定しますmyelem)。

(function() {
    var elm = document.getElementById('myelem'),
        url = 'background image URL here';
    elm.style.backgroundImage = "none";
    var tmp = new Image();
    tmp.onload = function() {
       elm.style.backgroundImage = "url('"+url+"')";
       // or insert some other special effect code here.
    };
    tmp.src = url;
})();

編集: ただし、背景画像が最適であることを確認してください。PNG の場合は、できるだけ小さなカラー テーブルでインデックスを作成するか、透明度がない場合はアルファ チャネルを削除してください。JPEG の場合は、圧縮を調整してみてください。

于 2012-04-04T15:02:38.553 に答える
1

画像に変数を設定し、画像が読み込まれるときに、ボディの背景に設定できます。

var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
于 2012-04-04T15:04:57.757 に答える
1

あなたが探しているのは、画像の onLoad メソッドです。display:none で画像を設定すると、表示されません。JavaScript が不足している可能性を回避するには、次の手順を実行します。

<body style="background-image:url(image.png);">
<img src="image.png" style="display:none" onLoad="changeBackground();" />
</body>
<script>
document.body.style.backgroundImage = "";
function changeBackground(){
    document.body.style.backgroundImage = "url(image.png)";
}
</script>

このように、javascript が有効になっていない場合、bg は通常どおり読み込まれます。ある場合は、最後に表示されます

于 2012-04-04T15:08:59.337 に答える
1

このページの例を確認してください: http://www.w3schools.com/jsref/event_img_onload.asp

「image.onload」を使用すると、イメージの準備ができたときにのみコードが開始されます

于 2012-04-04T15:02:21.773 に答える
1

JavaScript がないとイベントを発生させることができないため、少なくとも最初のレンダリングでは、画像がロードされているかどうかを知ることができません。

css プリロードを使用することもできます (非表示の div に画像を背景として配置します) が、読み込み中ではなく、最初の更新時にうまく機能します。

于 2012-04-04T15:03:34.937 に答える