图片的延时加载是为了提供App的运行效率,那么是如何实现的呢?献上github:  https://github.com/paveisistemas/ionic-image-lazy-load

1.下载ionic-image-lazy-load.js文件,拷贝到我们的lib目录下

2.在index.html页面中加入js文件引用

3.设置App依赖的模块

angular.module('ionicApp', ['ionic', 'ionicLazyLoad'])

4.在我们的list对象上设置延迟标志

  <ion-content lazy-scroll>
<ion-refresher pulling-text="下拉" refreshing-text="刷新中..." spinner="ios" on-refresh="doRefreshProduct()"></ion-refresher> <ion-list can-swipe="true">
<ion-item ng-repeat="p in productList" class="item-thumbnail-left" ng-click="toEdit($index)">
<img image-lazy-src="{{p.ImageUrl}}" class="dfimg1"/>
<h2>
{{p.Title}}
</h2>
<p class="date">
{{p.CreatedTime}}
</p>
<p class="introduction">
{{p.Content}}
</p>
<ion-option-button class="button-assertive" ng-click="toDel($index)">
删除
</ion-option-button>
</ion-item>
</ion-list> <p class="tip" style="margin-top:15px;" ng-if="pltip==1">暂无产品</p> <ion-infinite-scroll ng-if="showScroll" spinner="ios" on-infinite="loadMoreProduct()" immediate-check="true" distance="1%"></ion-infinite-scroll> </ion-content>

基本功能就这样,至于其他的延迟效果,需要时再看

Ionic 图片延时加载的更多相关文章

  1. picLazyLoad 图片延时加载,包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  2. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  3. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  4. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  5. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  6. js实现图片延时加载的原理

    实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...

  7. [转载]jQuery.lazyload详解 - 图片延时加载

    jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...

  8. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  9. dataset的使用和图片延时加载的实现

    首先,先介绍一下关于javascript中dataset属性..html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放.下面是元素应用data属性的一个例子:~~~~~~~~ ...

随机推荐

  1. Visual Flow 简介

    Visual Flow(流) Salesforce提供了几种自动化流程工具,其中的Visual Flow(流)可以用来实现用户界面和逻辑,并对数据进行CRUD(Create 创建,Read 读取,Up ...

  2. Related concepts of testing

    根据是否知道源代码测试可以分为黑盒和白盒. 黑盒:功能测试. 白盒:知道源代码,要写测试代码. 根据测试的粒度. 方法测试: 单元测试: 集成测试: 系统测试: 根据测试的暴力程度. 压力测试:谷歌工 ...

  3. Expo大作战(三十五)--expo sdk api之Location!

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  4. (网页)alert()怎么回事出不来,代码没有写错

    1.不报错,请查看浏览器是否禁掉了alter. 2.console.log()输出,避免这种尴尬.

  5. 【redis专题(1)】安装与启动

    简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...

  6. sql server自定义函数学习笔记

    sql server中函数分别有:表值函数.标量函数.聚合函数.系统函数.这些函数中除系统函数外其他函数都需要用户进行自定义. 一.表值函数 简单表值函数 创建 create function fu_ ...

  7. 模拟开户接口,使用python脚本实现批量用户开通

    1.目的 通过模拟接口方法,实现批量用户开通 2.分析 A.接口含body和head部分,其中body中的某些变量为必填字段,包含用户的信息. B.用户信息清单可以整理成ott_after_check ...

  8. Java同步、异步区别

    一.概念: 1.同步:所有的操作都做完,才返回给用户.这样用户在线等待的时间太长,给用户一种卡死了的感觉(就是系统迁移中,点击了迁移,界面就不动了,但是程序还在执行,卡死了的感觉).这种情况下,用户不 ...

  9. C#操作Exchange配置

    1.客户端配置:运行gpedit.msc进入本地组策略管理器,计算机配置>管理模版>Windows组件>WinRM>WinRM客户端启用允许未加密通信:启用受信任的主机并添加e ...

  10. Ubuntu + python pip遇到的问题

    今天在做Flask跨源资源共享(CORS)的时候在安装flask-cors时遇到了两个问题. 首先我是在Ubuntu环境下安装的,整了好一会才弄得出来,现在整理一下. 安装flask-cors pip ...