【angularjs】使用angular搭建項目，圖片懶加載資料

demo：

 

<ion-view view-title="{{chat.name}}">
  <style type="text/css">
    .image-loader-container{
        height: 40px;
        position: absolute;
        top: 50%;
        margin-top: -13px;
        left: 18px;
      }
  </style>
  <ion-content class="padding" lazy-scroll>
  <h5>點擊圖片有彈窗</h5>
    <div ng-click="tanpop(chat)">
        <!-- <img ng-src="./img/noimg.png" style="width: 64px; height: 64px"> -->
        <!--  ion-content上加lazy-scroll-->
      <img style="width: 64px; height: 64px" image-lazy-loader="spiral" image-lazy-src="{{chat.face}}" 
        src="./img/noimg.png" onerror="this.src='./img/noimg.png'"  image-lazy-distance-from-bottom-to-load="200"/> 
        <p>
          {{chat.lastText}}
        </p>
    </div>
  </ion-content>
</ion-view>

 

 

 

 

 相關資料

　　https://github.com/paveisistemas/ionic-image-lazy-load

　　https://blog.csdn.net/QQ417431233/article/details/51226435

　　https://ionicframework.com/docs/v1/api/directive/ionSpinner/

　　https://codepen.io/anon/pen/BxJNaz

　　https://blog.csdn.net/zuoyiran520081/article/details/72236717

　　https://segmentfault.com/q/1010000002730440?_ea=192608