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. spring-framework-中文文档一:IoC容器、介绍Spring IoC容器和bean

    5. IoC容器 5.1介绍Spring IoC容器和bean 5.2容器概述 本章介绍Spring Framework实现控制反转(IoC)[1]原理.IoC也被称为依赖注入(DI).它是一个过程, ...

  2. 4. 泛型_EJ

    第23条: 不要在新代码中使用原生态类型 声明中具有一个或多个类型参数的类或接口,就是泛型类或接口.每种泛型都定义一组参数化的类型,每个泛型都定义一个原生态类型.例如List<E>相对应的 ...

  3. Js 控制随机数概率

    如: 取 1~10 之间的随机数,那么他们的取值范围是: 整数 区间 概率 1 [0,1) 0.1 2 [1,2) 0.1 3 [2,3) 0.1 4 [3,4) 0.1 5 [4,5) 0.1 6 ...

  4. css控制文字自动换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换 行的方法 对于div,p等块级元素正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  5. angularJs学习笔记-路由

    1.angular路由介绍 angular路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样. 后台路由,通过不同的 url 会路由到不同的控制器 (controller) 上,再渲染(re ...

  6. JS之汉字与Unicode码的相互转化

    有时候,我们在给后端传递变量的的值中有汉字,可能由于编码的原因,传递到后端后变为乱码了.所以有时候为了省事或者其它特殊要求的时候,会把传递的汉字转换成Unicode编码后再进行传递. 当然汉字转换成u ...

  7. Vue2+VueRouter2+webpack 构建项目实战(一):准备工作

    环境准备 首先,要开始工作之前,还是需要把环境搭建好.需要的环境是nodejs+npm,当然现在安装node都自带了npm. 在终端下面输入命令node -v会有版本号出来.就说明安装成功了.输入np ...

  8. PHP对接淘宝客api完成APP引流优惠券

    淘宝客现在对多数人来说已经耳熟能详了,属于CPS(Cost Per Sale),一种网络广告收费标准,以实际销售产品数量来换算广告刊登金额.其他收费标准还有常见的CPC(Cost Per Click ...

  9. Python 基于Python从mysql表读取千万数据实践

    基于Python 从mysql表读取千万数据实践   by:授客 QQ:1033553122 场景:   有以下两个表,两者都有一个表字段,名为waybill_no,我们需要从tl_waybill_b ...

  10. VMWare上的ubuntu系统安装VMWare Tools(图文)

    一.启动vm,点击这里安装 二.将文件复制到桌面 三.在终端用命令,把文件解压到桌面 四.执行安装命令  sudo ./vmware-install.pl 五.效果图