問題タブ [imagesloaded]

そのため、スクリプトに を追加する前は.imagesLoaded、石積みは機能していましたが、石積みの前に画像がロードされていなかったため、重なってしまいました。だから、これは私の関数がどのように見えるかです：

pkgd.js対を使用する必要がありpkgd.min.jsますか?

カラーボックスが正しい高さに調整されていないことを除いて、正常に動作しているカラーボックスにインライン HTML を読み込もうとしています。

インライン HTML コンテンツは高さが非常に長い (約 15,000 ピクセル) が、900 ピクセルしか読み込まれていない。

そこで、 colorbox.resize() 関数を使用して問題を修正し始めました。

ただし、サイズ変更機能は約 11,000 ピクセルまでしか機能しません (必要な 15,000 ピクセルではありません)。ただし、ページを 2 回更新すると、15,000 ピクセル全体が読み込まれます。

誰でも解決策を提案できますか?

ありがとう

imagesLoadedは、(2014 年 11 月の執筆時点で)画像が読み込まれているかどうかを検出するための最良のソリューションのようです。

imagesLoaded ライブラリには次の特徴があることがわかりました。

• ライセンス: MIT ライセンス
• 依存関係: なし
• 重量 (縮小 & gzip 圧縮) : 7kb 縮小 (軽い!)
• ビルダーのダウンロード (軽量化に役立ちます) : 必要ありません、すでに小さいです
• Githubで：はい
• コミュニティと貢献者 : 4000 人以上のメンバーがいますが、貢献者はわずか 13 人です。
• 歴史と貢献: 比較的古い (2010 年以降) として安定しているが、まだアクティブなプロジェクト

上記のすべての機能は、非常に高品質の製品の方向性を示しています。ただし、公式ウェブサイトimagesloaded.desandro.comや Github ページgithub.com/desandro/imagesloadedにも明示的に言及されていない情報がまだいくつかあります。

1. ブラウザのサポートは？
2. デバイスのサポートは何ですか?

2番目の質問への答えは明らかだと思いますが、確認していただければ幸いです。

編集: この回答が IE7+ https://stackoverflow.com/a/19959809/759452で動作することを言及したことを思い出しましたが、さらなるフィードバックはまだ歓迎されています

編集 2 : IE7 をサポートしていないという別の情報源を見つけました。今回はライブラリの作成者自身によるものです。github.com/desandro/imagesloaded/issues/16 の「2012 年 11 月 30 日の desandro」からのメッセージを参照してください。

ホームページでangular-isotopeを使用してアイテムを整理していますが、画像と重なることがあります...

それを修正するには、imagesLoadedを使用する必要があることを知っています。jQueryでIsotopeを使用したときは実装が非常に簡単でしたが、今ではAngularJSで使用しています。どうすれば追加できますか?

ディレクティブを少し変更しようとしましたが、まだ適切に行う知識がなく、大量のエラーが発生したり、まったく機能しませんでした...

angular-images-loadedも見つかりましたが、 angular-isotopeで動作するように実装する方法がわかりません。

誰かがすでにこの種の問題を抱えていると確信していますが、ここでこの議論に関連する質問やGooglelingに関連する質問は見つかりませんでした.

チュートリアルまたは小さなコードへのリンクは、それを修正/実装する方法を理解するために高く評価されます.

約 150 以上の画像をページに読み込むページがあります。画像の構造は次のとおりです。

HTMLコード

（上記のコードを最小限にするために、画像へのフルパスを削除しました）

CSS コード

Jクエリ

私が達成したいのは、特定の画像が読み込まれるまで、個々の画像にプリロード スピナー (.is-loading) を表示することです。ロードが完了すると、スピナーは元の画像の表示を削除します。

これを機能させるためにjQuery imagesLoadedライブラリをいじってみましたが、うまくいきません。これはできますか？

どんな助けでも大歓迎です、ありがとう

これが私がやろうとしていることです。私は多くの画像を含むグリッドを持っているので、imagesLoaded ライブラリと石積みを使用しています。

これが私のCSSです：

そしてHTML：

そして、ここに私のJSがあります：

私の目標は、すべての画像が読み込まれ、レイアウトが完了するまでグリッドを非表示にしてからフェードインすることです。上記のコードでは、何らかの理由で on layoutComplete ブロックに入ることはありません。

そのブロックを imagesLoaded の外に移動すると、その時点で $container.masonry は未定義になります。

何か案は？

ここでフィドル

グリッドの不透明度を 1 に変更すると、すべてがうまく配置されていることがわかります。不透明度を1に設定するためにlayoutCompleteを呼び出す方法を理解しようとしています.

ページの読み込み時に要素のリストをレンダリングする React.js コンポーネントがありますが、このリストは、リストから特定の要素を削除し、変更されたリストをコンポーネントの状態で保存するフィルターで更新できます。この機能を機能させることができたので、状態は正しく更新されます。

要素は正しく再レンダリングされますが、レンダリングされる要素が少ないほど、使用されるスペースは少なくなります。これが発生すると、ページが占有する新しいサイズに合わせてページの高さが縮小されず、ページの最後の要素であるフッターの下に空のコンテンツが残ります。

編集 ：

これをもう少し詳しく調べたところ、React.js が問題の原因ではない可能性があると思います。コンポーネントの状態が更新されるたびに imagesLoaded および Wookmark jQuery プラグインを使用する関数を呼び出しますが、状態が変化するたびにこの関数を呼び出すとうまくいきません。呼び出された関数を変更する必要があるか、別の時点で関数を呼び出す必要がありますか?

呼び出される関数は次のように定義されます。