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

    

【angularjs】使用angular搭建项目,图片懒加载资料的更多相关文章

  1. JS实现图片懒加载插件

    一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...

  2. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  3. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  4. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  5. Zepto picLazyLoad Plugin,图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  6. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  7. vue 图片懒加载 vue-lazyload

    图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...

  8. 爬虫(七)图片懒加载技术、selenium和PhantomJS

    动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...

  9. Python网络爬虫之图片懒加载技术、selenium和PhantomJS

    引入 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.ch ...

随机推荐

  1. php 设计模式之单例模式

    单例模式的关键点 1.//私有构造函数,防止直接new 创建实例 2.//设置静态成员变量 作保存实例 3.//公有访问实例的静态方法 4.//防止克隆对象的方法 上代码: //单例模式 class ...

  2. [HTML/CSS]浮动的那点事儿

    元素是怎样浮动 元素的水平方向浮动,意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后的元素将围绕它. 浮动元素 ...

  3. [总结]JS操作DOM常用API详解

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  4. 在viewPager中双指缩放图片,双击缩放图片,单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  5. 求二叉树第n层节点数

    在知乎看到今日头条的一个面试题“求二叉树第n层节点数”:https://zhuanlan.zhihu.com/p/25671699,想到了这样一个解法,欢迎大家交流 我的解法采用递归的思想,从0层开始 ...

  6. loadrunner 脚本优化-事务时间简介

    脚本优化-事务时间简介 by:授客 QQ:1033553122 事务概念 事务是指用户在客户端做一种或多种业务所需要的操作集(actions),通过事务开始和结束函数可以标记完成该业务所需要的操作内容 ...

  7. (后端)安装mongodb以及设置为windows服务 详细步骤(转)

    1.在data文件夹下新建一个log文件夹,用于存放日志文件,在log文件夹下新建文件mongodb.log 2.在 D:\mongodb文件夹下新建文件mongo.config,并用记事本打开mon ...

  8. sublime使用Package Control不能正常使用的解决办法

    标签: Sublime作为一款非常优秀的编辑器,套用中学语文课本里一篇讲梁启超的文章里形容梁启超的一句话,就是“短小精悍”.说它“短小”,是因为它的轻量级:说它“精悍”,则得益于它那包罗万象以适用于任 ...

  9. Docker Data Center系列(三)- DTR安装指南

    本系列文章演示如何搭建一个mini的云平台和DevOps实践环境. 基于这套实践环境,可以部署微服务架构的应用栈,演练提升DevOps实践能力. 1 系统要求 1.1 硬件和软件要求 成为UCP管理的 ...

  10. spring静态代理和动态代理

    本节要点: Java静态代理 Jdk动态代理 1 面向对象设计思想遇到的问题 在传统OOP编程里以对象为核心,并通过对象之间的协作来形成一个完整的软件功能,由于对象可以继承,因此我们可以把具有相同功能 ...