web-dev-qa-db-ja.com

背景画像の読み込み遅延によって作成されたページの読み込み時に白い「フラッシュ」を防ぐ方法は？

問題は、ウェブ上のほとんどのサイトに背景画像があることです。ロードに時間がかかります。通常、画像が最適化されていて十分に小さければ問題ありません。しかし、私のサイトのいくつかでは、javascriptファイルはページ上の他の何かの前にロードする方法を見つけますフッターにある場合でも！これにより、背景画像が読み込まれる前に白い「フラッシュ」が作成されます。なぜ私のJavaScriptが最初に読み込まれるのですか？私は多くのサイトでこの問題を抱えており、どこでも見ます。現在作業中のサイトは次のとおりです。

http://www.bridgecitymedical.com/wordpress/

ありがとう！

tl; drバックグラウンドイメージが他の何よりも先にロードされるように、Webサイトへのjavascriptのロードを延期して、ブラウザがイメージのダウンロードを完了する前に白い「フラッシュ」を防ぐ方法はありますか。

javascriptcssjquery-deferred
30
alt

サイトの一部の読み込みを遅らせないでください-背景画像に送信エラーがあり、到着しない場合はどうなりますか？スクリプトはロードされません。

代わりに、「白い」フラッシュが本当に嫌いな場合は、ドキュメントの背景色をより快適な色に設定し、背景画像に合わせます。同じCSSスタイルでこれを行うことができます。

body {
    background: #EDEBED url(myGrayBackgroundImage.jpg);
}

シンプルで、実質的に費用がかからず、壊れず、不必要にダウンロードすることを遅らせません。あなたはすでにこのようなことをしているように見えます-私はそれを変更しません。あなたのサイトが特定の方法で見えるという期待を誰も持っていないと思いますbefore読み込みます。

49
Surreal Dreams

次のようなものを使用できます。

HTML

<!-- Add a class to flag when the page is fully loaded -->
<body onload="document.body.classList.add('loaded')">

CSS

/* Hide slider image until page is fully loaded*/
body:not(.loaded) #slider img {
  display:none;
}
19
kbtzr

そのため、背景色を変更することは役立ちますが、ページがすぐに読み込まれない理由は、おそらくヘッダーにjavascriptが含まれていることに注意することが重要です。これを修正するには、javascriptタグを挿入します

<script type="text/javascript" src="/path/to/js/javascript.js"></script>

ブラウザが既にcssを読み取り、ページのほとんどを表示した後に読み込まれるように、ページのフッターに追加します。これは古い投稿であることに気づきましたが、この問題について自分で考えながら思いつきました（以前見た会話や投稿を思い出すことで）ヘッダーにjsがあることに気付きました。

0
Robert McMahan

Cssの画像URLでクエリ文字列「？201611」を使用します。これにより、ブラウザにロードするイメージのバージョンがわかります。そのため、毎回新しいバージョンをチェックする代わりに、キャッシュに保存されているバージョンをロードします。フラッシュ効果は、Webサイトに初めてアクセスしたときにのみ発生します。

例 http://domain.com/100x100.jpg?201611

0
SequenceDigitale.com

体に黒の背景画像が設定されている場合に備えて、何かを追加したかったのです。同じサイトのページ間の遷移を試していました。私は最終的にこれを使用しました（フラッシュを避けて、黒から黒の背景をきちんと読み込みます！）：

html{
    background-color: black;
}

body{
    -webkit-animation: fadein 1.5s; //I use chrome
    background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) ), url('wall_pattern.jpg');
    color: white;
}
0
adr1Script