2016-12-17 12 views
1

JavaScriptライブラリを使用して、ウェブページ上に画像を配置していません。次のブラウザ:それは問題はChromeブラウザで発生し、計画されたようスクリプトが最初に読み込まれるべきか、イメージが読み込まれるべきですか?

  • Firefoxの
  • IE 11
  • マイクロソフトエッジ

は、ページをレンダリングします。それは完全なレイアウトを駄目にする。

すべての画像がダウンロードされない限り、上記のブラウザでは空白の白い画面が表示され、突然完全にレンダリングされたすべてのコンテンツが表示されるまで、コンテンツは読み込まれません。また、Chromeの場合、ブラウザーはスキャンライン方式で表示される画像を見ることができるため、外出先でコンテンツを表示します。私は内部でこれらの画像を配置機能の呼び出しを試みた

$(window).load(function() {})

、それは問題を解決しませんでしたが、私は<head></head>でこれを呼び出してみましたし、また、単に</body>を閉じる前に、そのどちらも解決しなかった。これはChrome関連の問題ですか?

関数を呼び出すべき正しい時点は何でしょうか?

+0

注:[リソースのロードはすべてではありません](http://stackoverflow.com/questions/39543290/how-to-know-when-browser-finish-to-process-an-image-after-loading-それ)、それはすでに良いスタートです;-) – Kaiido

答えて

1

のように実行する必要があります最初にロードする必要があります!もちろん、クロスブラウザで動作するはずだから、Chromeや他のブラウザの動作に違いはありません。

jQueryセレクタによって制御される特定のDOM要素または要素にロードされたすべての画像がその瞬間に実行されるように、コードを実行することができます。同様:

$('body').imagesLoaded(function() { 
    // images have loaded 
}); 

あり、あなたが必要な場合は、サポート.done.fail.progressコールバックもあるので、ドキュメントを確認してください。

+0

このライブラリは私のために働いています! –

0

画像が隠されて、その後、あなたのスクリプトは、あなたの問題を解決するために設計された包括的な名前imagesLoadedとウェブ上の素敵なライブラリがあり

$(document).ready(function(){ 

// here do the scripting may be showing them one by one 

}); 
+0

表示のように:なし? –

1

<img>タグで指定されていないパラメータ(たとえば、高さなど)を取得するためにイメージが読み込まれるまで待つ必要がある場合があります。次に使用することがあります$(window).load

その他のケースでは、画像にいくつかのクラスを追加するなど、画像を読み込む前に行うことができます。

ページが完全に読み込まれた後、または実際にスクロールして各イメージを表示した後にイメージをロードする場合は、Lazy Loadは良いプラグインであり、コールバックをサポートします。

関連する問題