問題タブ [jquery-lazyload]

私はまだこのゲームに慣れていないので、何かばかげたことをしている可能性がありますが、それが何であるかはよくわかりません。Bootstrap3 を使用してポートフォリオ サイトを構築しています。これで、ページ全体に並べ替えられていない画像のリストを読み込んでいますが、現時点では約 40 ほどあります。これらはゆっくりと同期されていないため、これを支援するために lazyload プラグインを適用しようとしていました。私の画像リストは、li クラスに応じて表示/非表示を切り替えるいくつかのフィルターにリンクされています。

フィルターは正常に機能します。ただし、Lazyload を機能させようとして、すべての画像が読み込まれる前にフィルターをクリックすると、事前に読み込まれた灰色のボックス画像が表示されます。

ここで実際の動作を見ることができます。http://megmackayphoto.com/Beta/portfolio4.html

また、ここに JSfiddle を追加しました 。私が持っているコードはここにありますが、これが実際に問題を示していないことを感謝します。

さらに、フィルター トリガーの前に来るこのコードを使用して、ここに遅延ロード トリガーがあります。

ほのめかしたように、私はおそらく本当にばかげたことをしているのですが、それを理解できません。どんな助けでも大歓迎です。ここで重要な情報が欠落している場合は、大声でお知らせください。より多くのポインタ/情報を提供しようとします.

ありがとう

画像の中心が親 div の中心になるように、絶対に配置する必要がある画像があります。私はすでにこれを行うコードを持っています。

最近、Lazy Load プラグインを追加しましたが、期待どおりに動作します。しかし、遅延読み込みが読み込まれて画像がフェードインした後に、画像のセンタリング コードをトリガーする方法が必要です。

私の現在のコードは基本的にこれです：

フェードイン効果の実行後にコールバック関数を実行するように設定できる Lazy Load の機能に関する情報が見つかりません。

I am using http://www.appelsiini.net/projects/lazyload but it is not working for an image result tabs that is generated by php loop and outputted using jquery ajax serializearray on bootstrap tabs. So I tried to put these codes in ajax success function and together with the output as but nothing worked.

Source: http://www.appelsiini.net/projects/lazyload/enabled_ajax.html

Source: Binding image lazy loading to new images inserted after ajax request

Thanks for the help!

Update

Part of the problem is found by setting the container. This code is added in ajax success function.

Then this one is added in document ready function.

Now the remaining problem is, the images in the other tab. The images don't load unless I scroll the page. I tried to trigger scroll when the tab is clicked but it didn't work. This is what I tried but both didn't work.

こんにちは、私のウェブサイトの画像に遅延読み込みを使用しているという質問があります。サーバー側を使用して最初の 10 個のデータを取得しましたが、これで問題ありません。ただし、 jquery> ajax を使用して次の 10 個のデータを読み込みます。必要なデータを取得できますが、遅延ロード機能が新しいデータで機能しません。

ここに私の見解の一部があります

getscript を使用してロードしようとしましたが、うまくいきませんでした。もう一度トリガーするにはどうすればよいですか? ありがとうございました。

私のモーダル画像は Chrome でのみ動作するようです。Firefox および Internet Explorer では、モーダル イメージによってエラーのあるコードが生成されます。

Chromeモーダルウィンドウでは問題なく、次のように見えます：

モーダル ウィンドウを生成するために使用する JavaScript: