5

私が見つけたすべてのことから、大きなCSSbackground-imageはjavascriptの実行をブロックするべきではありません。残念ながら、FirefoxとChromeの両方で、これが当てはまるようです。

Chromeでハードリフレッシュを実行すると、バックグラウンドがゆっくりと読み込まれ（接続が遅い場合）、JavaScriptが実行されて、ページの残りのコンテンツが表示されます。

DOMとFacebookSDKの準備ができたら、jQuery$(document).readyとFacebookのメソッドを使用してJavaScriptを実行しています。window.fbAsyncInit

関連性があるかどうかはわかりませんが、背景はCSSで次のように設定されています。

body {
    background: black url(...) no-repeat top center fixed;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: 50% 50%;
}

私はすでにCSSメディアクエリを使用して画面解像度を小さくするために小さい画像をロードしていますが、背景画像を小さくしても問題は解決しません。症状を隠すだけです。

背景画像がJavaScriptの実行をブロックしないようにするには、他に何をすべきですか？

私の考えは、ダミーの背景画像をロードしてから、JavaScriptに実際の背景画像（および小さな画面のメディアクエリ）を含む別のスタイルシートを追加さ​​せることですが、これはハッキーのようです。

4

3 に答える 3

6

背景画像を読み込んでも、Javascriptの実行が妨げられることはありません。その理由は、画像をロードすると、そもそもスクリプトがロードされない可能性が高いためです。

ブラウザには、各ドメインに対して同時に実行するリクエストの数に制限があり、同様に、Webサーバーには、同じユーザーから同時に処理するリクエストの数に制限があります。場合によっては、制限が1つまたは2つの同時ダウンロードと同じくらい低いことがあります。

画像の前にスクリプトをロードする場合は、スクリプトを使用して、CSSで背景画像を設定します。これにより、画像の読み込みが開始される前にスクリプトが読み込まれたことがわかります。

$(document.body).css('background-image', 'url(...)');
于 2013-03-10T21:12:06.717 に答える
0

この関数を使用しているため$(document).ready()、jQueryは意図的に使用され、すべての画像などが読み込まれるまで待機しています。これは、次のような問題から保護するためです。

$('#div-with-background-image').css('background')

...次に、jQueryは画像が読み込まれたかどうかを知りたいと思います。

画像を遅延読み込みするには、クラスを追加し、bodyクラスが追加された後にのみ画像を表示します。これは次のように実行できます。

jsの場合：$（document）.ready（function（）{$（'body'）。addClass（'loaded'）;} cssの場合：.loaded＃div-with-background-image {background-image：url （'...'）;}

$(window).load(function() {...})または、代わりにメソッドを使用することもできます$(document).ready

于 2013-03-10T21:01:23.277 に答える
0

a）ユーザーが画像の詳細に何も気付かずに画像のファイルサイズを縮小する方法があります。それを実行できるライブラリまたはソフトウェアを探すだけです。

b）ここでは、CSSが主な問題だとは思いません。JavaScriptが重すぎると思います（開発者ツールまたはFirebugで実行時間を確認してください）。

c）Facebookのようなソーシャルメディア接続を使用するには多くの作業時間がかかります。FacebookのSDKを頭にロードするのではなく、本体にロードすることを検討する必要があります。

d）ソーシャルプラグインのパフォーマンスを最適化する方法に関するFacebook開発者からの投稿は次のとおりです：http：//developers.facebook.com/blog/post/530/

e）これをチェックしてください：最新のブラウザでのノンブロッキングjavascriptとcss。それはまだ必要ですか？

于 2013-03-10T21:01:40.640 に答える