图片的延时加载是为了提供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. Salesforce的站点和社区

    社区 Salesforce提供了"社区"功能.建立一个"社区"相当于建立一个前端的网站,让用户.客户.其他合作伙伴等浏览并使用其中的内容. 启用Salesfor ...

  2. vue-cli快速原型开发

    我们知道vue-cli提供了一套如何快速搭建vue开发脚手架的工具,虽然好用,但是有的时候我们还是嫌麻烦,因为就想快速开发调试一个组件,这时我们就可以使用vue-cli 3.x以上版本的一个好特性: ...

  3. 合理配置SQLSERVER内存

    合理配置SQLSERVER内存 原文地址:https://www.cnblogs.com/lyhabc/archive/2012/09/28/2707857.html SQLSERVER是个很喜欢内存 ...

  4. 使用parted创建gpt大分区例子

    [root@VM000000518 ~]# parted /dev/xvde GNU Parted 2.1 Using /dev/xvde Welcome to GNU Parted! Type 'h ...

  5. Centos7.5调试/etc/sysctl.conf文件导致宕机

    今天安装greenplus数据库,需要调试一个核心文件/etc/sysctl.conf文件,结果导致系统异常宕机,出现的问题就是使用任何命令都不能输出正确的结果,只有这个显示: 不知道是什么原因,ls ...

  6. Xcode调试LLDB

    一.简介 关于Xcode调试,相信大家很多会用断点调试,今天无意间在苹果开发的群里看到了po,瞬间心中有个疑问:po是什么?下面我就百度搜索了一下,介绍一点皮毛. 首先是LLDB,它的全名是lower ...

  7. 怎样从本地删除git远程仓库里面的文件

    git是大家通用的一种版本控制系统,便捷高效,各种命令需要牢记,今天小渔介绍给大家的是git的删除命令,即将文件从远程仓库中删除的操作. 方法/步骤     首先,我们打开自己的本地GIT仓库,在根目 ...

  8. Properties集合_练习

    定义功能:获取一个应用程序 运行次数,如果超过5次,给出使用次数已到请注册的提示,并不要再运行程序 思路:  1.定义计数器:每次程序启动都需要计数一次,并且是在原有的次数上进行计数.  2.计数器就 ...

  9. luogu P4781 【模板】拉格朗日插值

    嘟嘟嘟 本来以为拉格朗日插值是一个很复杂的东西,今天学了一下才知道就是一个公式-- 我们都知道\(n\)个点\((x_i, y_i)\)可以确定唯一一个最高次为\(n - 1\)的多项式,那么现在我们 ...

  10. css3 媒体查询常用适配

    @media (max-width:1300px) {} @media (max-width:1080px) {} @media (max-width:799px) {} @media (max-wi ...