1

そのために非常に大きなサイズの背景画像を使用しているWebページがあります。問題は、通常、ページにアクセスすると、Webサイトのコンテンツが表示され、背景画像が読み込まれることです。

私の場合、状況は異なります。私の Web ページは、背景画像が読み込まれるまで待機してから、ページのコンテンツの表示を開始します。

非常にシンプルなCSSを使用しています

body{background-image:url('http://www.example.com/myimage.jpg')}
other css goes here....

ウェブページのロードフローは

Background image load first (webpage display no contents it just load the image)  
     |
then load the contents.

最初にコンテンツをロードしてから、背景画像をロードしたいと思います。（単純な方法を使用）またはbackground-image と content の非同期ロード。

4

1 に答える 1

1

簡単な解決策:

読み込み時に css を介して背景画像を追加するだけです。

// in header of page
window.onload = function(){
    document.body.style.backgroundImage = "url('http://www.example.com/myimage.jpg')";
}

より複雑な解決策:

見栄えを良くしたい場合は、画像要素を追加し、読み込みが完了したら背景にフェードインします (jQuery を使用)

// in header of page (make sure to include jQuery)
$(window).load(function(){
    var img = new Image();
    img.src = "http://www.example.com/myimage.jpg";
    $(img).addClass("bgImgStyle").hide().prependTo("body").fadeIn();
});
于 2013-02-11T05:48:12.780 に答える