angular.js - angularjs如何实现图片延迟加载？

Question

写一个移动端显示图片列表的web，以往都是使用jQuery的延迟加载插件来实现这一功能的，但是现在要求不能使用jQuery以及其他插件，仅使用angularjs实现这个功能。图片的路径是存储在一个json中，通过读取json的数据ng-repeat出来的。
请问有什么好的解决方法？

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