モバイル端末上で画像を一覧表示するWebページを作成する 以前はjQueryの遅延読み込みプラグインを使用してこの機能を実現していましたが、現在はjQueryや他のプラグインを使用できないことが求められます。 、この関数の実装には angularjs のみが使用されます。画像のパスは json に格納されており、json データ ng-repeat を読み取ることで取得されます。 何か良い解決策はありますか？
https://github.com/Treri/me-lazyloadhttps://github.com/Treri/me-lazyimg
2 つの関数は似ています。前者はスクロール用にドキュメント内に配置され、後者は要素内でスクロールするように設定できます。
感想: 1. 画像のソースの実際のアドレスを使用しないで、属性を使用して要素に保存します。 2. ロードする必要があるすべての画像を配列に入れます 3. 初期化中に、配列内の要素が表示範囲内にあるかどうかを確認し、表示範囲内にある場合はロードされます。 4. スクロールイベントをウィンドウにバインドして、画像が表示範囲内にあるかどうかを確認します 5. 読み込んだ写真はキューから削除されます
元のリンク: https://www.npmjs.com/package/angular-imglazyload
jquery のアプローチは、window.scroll を監視し、画像の位置と src 属性を切り替える必要があるかどうかを判断することです。これは angular にも当てはまりますが、angular は命令に DOM 操作を記述する必要があるため、自分で命令を実装するには、一般的な考え方は次のとおりです ;
リスナーを 1 つだけ使用して jquery のような効率を実現したい場合は、この LazyLoad のロジックで IMG をクエリする方法を考慮する必要があります シンプルにして手間を省きたい場合は、img 属性レベルでコマンドを直接記述するだけですが、これにより、画像と同じ数のイベント コールバックが登録されます
http://afklm.github.io/ng-lazy-image/ このモジュールは多くの人が作成したもので、見た目も良く、非常に使いやすいです
読み込みを遅らせるには $timeout を使用する必要があります
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://github.com/Treri/me-lazyload
https://github.com/Treri/me-lazyimg
2 つの関数は似ています。前者はスクロール用にドキュメント内に配置され、後者は要素内でスクロールするように設定できます。
感想:
1. 画像のソースの実際のアドレスを使用しないで、属性を使用して要素に保存します
。 2. ロードする必要があるすべての画像を配列に入れます
3. 初期化中に、配列内の要素が表示範囲内にあるかどうかを確認し、表示範囲内にある場合はロードされます
。 4. スクロールイベントをウィンドウにバインドして、画像が表示範囲内にあるかどうかを確認します
5. 読み込んだ写真はキューから削除されます
元のリンク: https://www.npmjs.com/package/angular-imglazyload
jquery のアプローチは、window.scroll を監視し、画像の位置と src 属性を切り替える必要があるかどうかを判断することです。これは angular にも当てはまりますが、angular は命令に DOM 操作を記述する必要があるため、自分で命令を実装するには、一般的な考え方は次のとおりです ;
リーリー リーリーリスナーを 1 つだけ使用して jquery のような効率を実現したい場合は、この LazyLoad のロジックで IMG をクエリする方法を考慮する必要があります
シンプルにして手間を省きたい場合は、img 属性レベルでコマンドを直接記述するだけですが、これにより、画像と同じ数のイベント コールバックが登録されます
http://afklm.github.io/ng-lazy-image/ このモジュールは多くの人が作成したもので、見た目も良く、非常に使いやすいです
。読み込みを遅らせるには $timeout を使用する必要があります