angular.js - Bagaimana untuk melaksanakan pemuatan malas imej dalam angularjs?

Question

Tulis halaman web yang memaparkan senarai imej pada terminal mudah alih Pada masa lalu, pemalam pemuatan malas jQuery telah digunakan untuk melaksanakan fungsi ini, tetapi kini ia memerlukan jQuery dan pemalam lain tidak boleh digunakan. , dan hanya angularjs digunakan untuk melaksanakan fungsi ini. Laluan imej disimpan dalam json dan diperoleh dengan membaca data json ng-repeat.
Adakah terdapat sebarang penyelesaian yang baik?

Answer 1

https://github.com/Treri/me-lazyload
https://github.com/Treri/me-lazyimg

Kedua-dua fungsi adalah serupa, yang pertama diletakkan dalam dokumen untuk menatal, dan yang kedua boleh ditetapkan untuk ditatal dalam elemen

Answer 2

Perkara:
1. Jangan gunakan alamat sebenar src imej Gunakan atribut untuk menyimpannya pada elemen
2. Letakkan semua imej yang perlu dimuatkan ke dalam tatasusunan,
3. Semasa pemulaan, semak sama ada elemen dalam tatasusunan berada dalam julat yang boleh dilihat. Jika ia berada dalam julat yang boleh dilihat, ia akan dimuatkan
4. Ikat peristiwa tatal ke tetingkap untuk menyemak sama ada imej berada dalam julat yang boleh dilihat
5. Gambar yang dimuatkan dipadamkan daripada baris gilir

Pautan asal: https://www.npmjs.com/package/angular-imglazyload

Answer 3

Apa yang dilakukan oleh jquery ialah mendengar window.scroll, dan kemudian menentukan kedudukan imej dan sama ada ia perlu menukar atribut src Perkara yang sama berlaku untuk sudut, tetapi kerana sudut perlu menulis operasi DOM dalam arahan, anda perlu melaksanakan arahan itu sendiri, mungkin Ideanya adalah seperti berikut;

html<lazyload>
    <img data-source="real.png" src="holder.png" />
</lazyload>

javascriptangular.module('yourapp').directive('lazyload', function () {
  return {
    restrict: 'EA',
    replace: false,
    link: function (scope, element, attrs) {
      angular.element(window).on('scroll', function() {
        // 计算距离 切换img属性
      });
    }
  };
});

Jika anda mahu kecekapan menjadi seperti jquery, dengan hanya satu pendengar, maka logik lazyLoad ini perlu mempertimbangkan cara membuat pertanyaan IMG

Jika anda mahu ia menjadi mudah dan bebas masalah, cuma tulis arahan terus pada tahap atribut img, tetapi ini akan mendaftarkan seberapa banyak panggilan balik acara seperti imej

Answer 4

http://afklm.github.io/ng-lazy-image/ Ramai orang telah membuat modul ini kelihatan baik dan ia mudah digunakan

Answer 5

Anda harus menggunakan $timeout untuk menangguhkan pemuatan