41

問題は、Web 上のほとんどのサイトに背景画像があることです。読み込みに時間がかかります。通常、画像が最適化され、十分に小さければ問題にはなりません。ただし、一部のサイトでは、フッターにあるにもかかわらず、JavaScript ファイルがページの他の何よりも先に読み込まれます。これにより、背景画像が読み込まれる前に白い「フラッシュ」が作成されます。javascript が他の何よりも先に読み込まれるのはなぜですか? 多くのサイトでこの問題が発生しており、どこでも見られます。私が現在取り組んでいるサイトは次のとおりです。

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

ありがとう！

tl;dr Web サイトでの JavaScript の読み込みを延期して、背景画像が何よりも先に読み込まれるようにするにはどうすればよいですか。これにより、ブラウザが画像のダウンロードを完了する前に白い「フラッシュ」が発生するのを防ぐことができます。

4

6 に答える 6

57

サイトの一部の読み込みを遅らせないでください。背景画像の送信中にエラーが発生し、届かない場合はどうすればよいでしょうか? あなたのスクリプトはロードされません。

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

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

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

于 2011-09-14T05:22:50.700 に答える
21

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

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;
}
于 2011-09-14T05:19:56.487 に答える
3

私は同じ問題を抱えていましたが、これがこれ以上話されていないのはかなり奇妙だと思いました. 私はまだこれに関するドキュメントを見つけていませんが、CSS の背景画像の読み込みの優先順位などの RFC に関して何か見つけた場合はコメントしてください。

とにかく、私が見つけた唯一のことは、<img>background-image() がDOM Readyにロードされているように見える間にすぐにロードすることです。

したがって、私の解決策は、背景画像の直前に<img>withを配置することでした。これにより、画像がすぐに読み込まれ、背景画像にすぐに使用されます。display:none<div>

<img src="my-image.jpg" style="display: none;" />
<div style="background-image: url('my-image.jpg');"></div>
  • 注意すべきことの 1 つは、最適化されていない画像でもちらつきが発生する可能性があることです。そのため、jpg の場合は必ず圧縮し、作成時に「プログレッシブ」属性を設定してください。
于 2019-10-07T22:39:00.293 に答える
1

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

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;
}
于 2016-09-28T20:59:37.550 に答える
0

したがって、背景色を変更することは役に立ちますが、ページがすばやく読み込まれない理由は、ヘッダーにある JavaScript が原因である可能性が高いことに注意することが重要です。JavaScriptタグを配置することでこれを修正できます

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

ページのフッターに配置して、ブラウザがすでに CSS を読み込んでページの大部分を表示した後に読み込まれるようにします。これは古い投稿だと思いますが、この問題について自分で考えているときにたまたま見つけ、(以前に見た会話や投稿を思い出して) ヘッダーに js があることに気付きました。

于 2015-10-12T02:02:51.823 に答える