問題タブ [imagesloaded]

jQuery Isotope を使用して水平レイアウトを作成し、DIV を 100% の高さで並べて配置し、各 DIV 内の画像を垂直方向に中央揃えにしています。だから、私はこのようにIsotopeを呼び出しており、すべてがChromeで（ローカルで）正常に動作します：

画像の読み込みに時間がかかるため、Isotope のレイアウトが台無しになる傾向があるため、imagesLoaded 修正を使用しようとしています: http://isotope.metafizzy.co/appendix.html

この修正を次のように実装しました。

この imagesLoaded を使用すると、Isotope はまったく読み込まれなくなります。imagesLoaded を削除すると、Isotope が再び機能します (ただし、レイアウトがめちゃくちゃになります)。間違いがどこにあるのか、誰か知っていますか？

ありがとう！

私はプロジェクトに Masonry を使用しており、それに応じて imagesLoaded を適用しています。

何度も何度もテストした結果、これら 2 つはほぼ完全に連携して動作することがわかりましたが、失敗することもあります。99% の場合は imagesLoaded のせいです。

ただし、Internet Explorer では、imagesLoaded は他のどのブラウザーよりも多くの読み込みに失敗するようです。

これが私が見つけたものです：

• 新しいタブを開いてURLを直接入力すると-> imagesLoadedが動作します
• 更新を押すと-> imagesLoadedが機能します
• URL を入力した場合は、[更新] をクリックし、アドレス バーのテキストをマークして Enter キーを押します -> imagesLoaded は失敗します
• コンソールを開いた状態で上記のアクションを繰り返す場合 -> imagesLoaded が機能する
• 気が向いたらうまくいかないこともあるし…。

ここでの取引は何ですか？これは、Internet Explorer (11、10、9 など) でのみ発生します。

JS は次のとおりです。

デモページ: http://lorem-blogsum.tumblr.com/

imagesLoaded が Firefox で動作するために少なくとも 300 ミリ秒のタイムアウトが必要な理由はありますか? それより小さく設定すると、画像がロードされる直前に imagesLoaded イベントが発生します。最新バージョンの 3.1.x を使用しています。

みんな！

私は最初のウェブサイトをゼロから構築しています。HTML と CSS は知っていますが、JavaScript と PHP の知識は本当に基本的なものです。そのため、Web サイトでは Masonry グリッド レイアウト ライブラリを使用し、それを ImagesLoaded と組み合わせて、画像が重ならないようにしています。公式サイトの指示に従って HTML にスクリプトを含めたのですが、なぜかまったく機能しません。(ImagesLoaded を使用しない Masonry だけで動作していましたが、画像が重なっています。) 何が間違っているのか教えてください。

ウェブページはこちらです。ご覧のとおり、Masonry は初期化されていません。

http://vprilenska.netai.net/design_archandfilm.php

これがスクリプトです。ボディ終了タグの前に、HTML の下部に含めました。

はい、石積みはアイテムに適用されます。各アイテムは、画像とキャプションを含む div で、右にフロートされます。すべての画像はコンテナの石積みにあります。列幅とガターは要素によって定義されます。

PHPでwordpressプラグインを書いています。そのプラグインでは、小さなテキストを含む画像を出力し、それを石積みで行いたいと考えています。

HTMLで石積みを初期化すると、うまくいくように見えますが、写真が重なっています:

したがって、「Imagesloaded」を使用しようとしています（同じ開発者によるものですか？）。

しかし、私が見たように、ImagesLoaded を使用する前に、Masonry を立ち上げて JavaScript で実行する必要があります。plugin_scripts.js で Masonry を初期化すると、フロントエンドでエラーが発生します。

plugin_scripts.js:

フロントエンドのコンソール エラー:

手伝ってくれますか？

1 ページに複数のアイソトープ コンテナがあります。各コンテナにajaxを使用して新しいアイテムをロードできますが、imagesLoadedプラグインを使用して画像がロードされた後にアイテムを再レイアウトしようとすると、最後のコンテナでのみ機能します。

私のコードは、ajax でアイテムを取得すると次のようになります。

imagesLoaded は最後のコンテナーにのみフックされるようですが、理由はわかりません。共有するライブ リンクがありません。申し訳ありません

Isotope 2.0 jQuery プラグインを使用しています。古い例を見直すと、多くのオプションが変更されていることがわかりました (初期化など...)。2.0 バージョンで動作する実例を 1 つだけ見つけました。

現在、2 つの質問があります。1)。このスクリプトをImages Loadedプラグインと統合する方法。私のinitスクリプトとは異なるため、ドキュメントの例は機能しません。2)。サイトにいくつかの div ブロックがあり、Isotope でそれらを個別に使用します。つまり、initメソッドは、使用可能なコンテナーを一覧表示し、独自の独立したフィルターを作成できる 1 つの基本的なスクリプトから構成する必要があります。

どうすれば解決できますか？同様の回答を見 たことがありますが、1.5.x バージョンでのみ機能します