問題タブ [jquery-lazyload]

Web サイトに遅延読み込みを実装しましたが、ページ全体がスクロールされるまでサイドバーの画像が読み込まれないことがわかりました。サイドバーの HTML コードはフッターであり、CSS を使用してそれをサイドバーに表示するためです。

少しスクロールした後など、フルスクロールせずにサイドバーの画像を表示する方法はありますか

テストページ : http://www.pricingindia.in/mobile/nokia-lumia-1320-price-80950

isotope jquery プラグインと組み合わせた lazyload に対して画像をレスポンシブにするにはどうすればよいですか? これまでのところ、次のコードがあります。

Lazyload はこのように機能し、アイソトープのメーソンリーも同様に機能しますが、ブラウザーのサイズを画像の幅よりも細いサイズに変更すると、ページのコンテンツ コンテナーからはみ出し、反応して縮小しません。難しいのは、lazyload が img タグのスタイル セクションで画像の実際の幅と高さを必要とするように見えることです。

残念ながら、Meta Slider WP プラグインは遅延読み込みをサポートしていませんが、必要なものには完璧です。理由は次のとおりです。

この WP Meta Slider プラグインを使用して複数のスライダーに表示される大量の画像 (スライダーごと) があります。すべてのスライダーは、使用可能な他のオプションではなく、Flex Slider オプションを使用します。そして、ご想像のとおり、ページの読み込み時間はひどいものです。

遅延ロードを調べたところ、次のサイトに出会いました。

http://www.appelsiini.net/projects/lazyload

それは私が必要としているものの完璧なソリューションのようですが、このプラグインがすべての画像を一度にロードするのを止めるには、Meta Slider ファイルのコーディングのスニペットをどこに入力する必要がありますか? 何が起こっているかというと、訪問者がサイトに来ると、このプラグインは、最初のページの読み込み時にアップロードしたすべての画像を読み込み、ページの読み込みが非常に遅くなります.

追加情報：

画像は 120x220 で 50kb 未満の png です。それらを gif の代わりに jpg に変換すると、ファイル サイズが 12kb から 15kb の間に圧縮されることがわかりましたが、それ以下になると、画像の色の品質が失われ始め、画像の色の品質が非常に重要になります。

追加情報の終わり

とにかく、私の画像データベースは成長しており、訪問者がページの読み込み時間を可能な限り短縮するために、スクロールアップまたはダウン時にのみ画像を読み込む必要があります。これにより、訪問者がオフになってサイトを離れることがなくなります。

ありがとう！

ああ、これが私が使用しているプラ​​グインです：

wordpress.org/plugins/ml-slider/

MVC 4 のエンティティ フレームワークを使用して、データベースから ajax 呼び出しでレコードを取得する機能を実装しました。次のようにローディングアプローチ：

ここをクリック

pagenumber パラメータを渡し (pagesize を 10 に設定)、ajax 呼び出しで結果を返す関数をコントローラに作成しました。

しかし、遅延読み込みに ajax 呼び出しを組み込む方法がわかりません。実際には、ajax 呼び出しでページ番号パラメーターを渡します。だから私は以下のようにしたい：

1) 下にスクロールすると、ページ番号が 1 ずつ増えます

2) ページ番号を増やして ajax 呼び出しを行う

3) 返された結果は、最後の結果まで div などに表示されます。

ありがとう

私のページにはいくつかの画像があります：

画像を読み込めない場合 (abc.jpgたとえば、存在しないため)、代わりに「デフォルト」の画像を表示します。

イメージにLazyLoadを追加して、さらに軽量なデフォルト イメージをロードすると、次のようになります。

これで、ページが読み込まれると、実際の画像が読み込まれる前に、最初に軽量の画像が読み込まれます。

しかし、実際の画像が存在しない場合はどうなるでしょうか? 軽量のデフォルトの画像はそこに残りますが、それは私が望むものではありません:

default.jpgエラー時にデフォルトのイメージ ( ) を読み込むにはどうすればよいですか?

PS: デフォルトの画像はかなり重いので、デフォルトの画像としてロードすることは避けたいと思います。

lazyload がスクロール時に 1000 を超える画像をロードしているページがあります。ブラウザーが「遅れる」場合 (スムーズなスクロールではなく、タックルすると考えてください)、lazyload は最初の画像を 1 行に読み込んだ後、約 7 枚の画像で実行に失敗します。(1行あたり8枚の画像)。

スクロールが速すぎる場合にも発生します。（理由は上記の状況と同じだと思います）

私はこれに対する解決策を見つけようとしています。

これが元の関数です。私は .each() ループで変更しようとしましたが、その結果、通常の方法で画像をロードするだけで、遅くなりました。

プラグイン: http://www.appelsiini.net/projects/lazyload レスポンシブ デザインを使用していますが、それが原因でしょうか?

それは、webkit の問題 (chrome、safari) のみであり、mozilla で非常にうまく機能し、OS X の問題のみであると思われます。Windows Webkit ブラウザーですべてが良好

このリンクによると、lazyload は holder.js スクリプトに準拠するようになりました。

ここにjsFiddleがあります。3 番目の画像が他の画像と同じようにフェードインすることを期待しています。しかし、私はそれを機能させることができません。

誰かが私が間違っていることを教えてもらえますか?

前もって感謝します。

HTML :

JS:

私はlazyload unvielを使用していますが、何らかの理由で、絶対に配置した画像をロードしません。

https://github.com/luis-almeida/unveil

この問題にどのようにアプローチできますか? 代わりに使用する必要がある別の Lazyload ですか?

デモ

次のコードから画像 src を取得する必要があります

HTML

私はjsを書いてみました：

しかし、srcキーが存在しないことを示しています。レビューのアバター画像をスクラップするにはどうすればよいですか?

アップデート：

ページのソースを見たときに画像の URL が見つかりませんでしたが、firebugには画像の URL が表示されます。

<img id='lazyload_1953171323_17' height='24' alt='4 helpful votes' width='25' class='icon lazy'/>

私のページのソースコードは次のとおりです。

lazyload を使用しているため、何か問題はありますか?

更新 2

lazyload を使用すると、ページが読み込まれると画像が読み込まれます。画像 ID を取得してそれらをlazyload js配列と比較しようとしましたが、この ID はlazyload var配列と一致しません。

質問：

このJSONからこの js 配列を取得する方法は?

例：

写真の URL を解析し、lazyload プラグインを使用しているため、写真の URL がどこにあるかについて 3 つの異なる可能性を持つ JSON フィードがあります。

たとえば、写真がない場合は未定義です (以下を参照してください。その行を単独でテストしたところ、機能します)。写真が 1 枚の場合は、data.value.items[i]["media:content"].url にあります。複数の写真がある場合は、data.value.items[i]["media:content"][i].url になります (media:content の i は 0、1、2 などです。存在する写真の数に応じて)。

リンクと見出しは順調に流れています。写真に問題があるだけです。

このコードの現在のバージョンでは、ログをコンソールに表示し、すべてがプレースホルダー写真 (green_app.jpg) に割り当てられているか、実際の写真にリンクしているように見えることを確認できます。それでも、それをページに表示することはできません。