web-dev-qa-db-ja.com

Webブラウザで背景画像が正しく表示されない問題を修正

この質問のスクリーンショット:

Background image not displaying correctly

Css-tricks.com/examples/BlurryBackgroundEffect/で見られるような固定位置の画像を使用して、作業中のWebプロジェクトにガラスのような効果を作成しています。上のスクリーンショットでよくわかるように、ブラウザがスクロールなどによって再描画を強制されるまで、コンテンツブロックの画像は表示されません。

Onloadタグと隠しimgタグの両方を別々に使用して、プリロードを試みましたが、それでも起こります。

これは大きな問題ではありませんが、これが発生する理由を誰かが理解していれば、本当に役立ちます。

2
Mikey

再描画をトリガーする場合は、常に次を使用できます。

body { display: none }

それから

window.onload = function () {
    document.getElementsByTagName('body')[0].display = 'block';
}

これにより、ページのロードがずっと長くなります。

ブラウザ間でのロード/再描画の制御に関する私が読んだ最良のアドバイスは、 Steve Souders Evener Web Sites です。

注:

関連セクションを JSFiddle にいつでも配置できるので、他の人が助けることができます(画像は ImageShack にアップロードし、提供された「ダイレクトリンク」を使用して含めることができます)。

2
Metalshark