【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

    

posted on   smile轉角  阅读(302)  评论(0编辑  收藏  举报

编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通

导航

统计

点击右上角即可分享
微信分享提示