1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  6.         <meta name="apple-mobile-web-app-capable" content="yes">
  7.         <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8.         <title>懒加载</title>
  9.         <link rel="stylesheet" href="../css/mui.min.css" />
  10.     </head>
  11.     <body>
  12.         <header class="mui-bar mui-bar-nav">
  13.             <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  14.             <h1 class="mui-title">lazyload（延迟加载） </h1>
  15.         </header>
  16.         <div class="mui-content">
  17.             <ul id="list" class="mui-table-view mui-table-view-chevron">
  18.                 <li class="mui-table-view-cell mui-media">
  19.                     <a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://p0.qhimgs4.com/t0191c0cf8fcaebea92.webp"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>
  20.                 </li>
  21.             </ul>
  22.         </div>
  23.         <script type="text/javascript" src="../js/mui.min.js" ></script>
  24.         <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
  25.         <script type="text/javascript" src="../js/mui.lazyload.js" ></script>
  26.         <script type="text/javascript" src="../js/mui.lazyload.img.js" ></script>
  27.         <script type="text/javascript">
  28.             mui.init();
  29.             (function($) {
  30.                 var list = document.getElementById("list");
  31.                 $(document).imageLazyload({
  32.                     placeholder: '../img/defaultSmall.jpg',
  33.                 });
  34.             })(mui);
  35.         </script>
  36.     </body>
  37. </html>

mui图片懒加载的更多相关文章

  1. MUI - 解决动态列表页图片懒加载再次加载不成功的bug

    首先描述一下功能 实现列表页动态加载 通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现. http://www.cnblogs.com/philly ...

  2. MUI - 基于plus.downloader的图片懒加载功能，支持本地缓存

    基于plus.downloader的图片懒加载功能,支持本地缓存 简单说一下 在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的.我相信这对大多数的app都是强需求的. 怎么使 ...

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

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

  4. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  5. webapp图片懒加载实现

    图片懒加载在webapp上非常流行,应用的很广泛. 实现图片懒加载功能:zepto.picLazyLoad.min.js 引入类库 <script src="1.1.3/zepto.m ...

  6. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  7. jQuery.imgLazyLoad图片懒加载组件

    一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...

  8. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

  9. js 图片懒加载

    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...

随机推荐

  1. Flask - WTF和WTForms创建表单

    目录 Flask - WTF和WTForms创建表单 一. Flask-WTF 1.创建基础表单 2.CSRF保护 3.验证表单 4.文件上传 5.验证码 二. WTForms 1. field字段 ...

  2. 【转载】Apache shutdown unexpectedly启动错误解决方法

    http://blog.csdn.net/dong123dddd/article/details/21372179 xampp启动时显示的错误为: 9:52:41  [Apache] Attempti ...

  3. 1、ceph-deploy之部署ceph集群

    环境说明 server:3台虚拟机,挂载卷/dev/vdb 10G 系统:centos7.2 ceph版本:luminous repo: 公网-http://download.ceph.com,htt ...

  4. Java_集合总结

    集合分类 Collection 接口是集合的父类 1.Set 集合 使用内部的排列机制(无序),存入集合的顺序和取出集合的顺序不一致,没有索引,存入集合的元素没有重复 HashSet集合 Linked ...

  5. 暑假集训D15总结

    考试 日常爆炸= = T1数据背锅,回天乏力 推了两个小时的T2竟然莫名RE,我也是服了 T3考试时就没读懂题,做个鬼啊 今天一直在写某奇怪的技术贴,竟然没有写题解(手动滑稽) 希望明天不要乱炸吧 博 ...

  6. portmap 和 rpc程序

    Portmap 是为RPC 程序服务的. 每一个RPC server程序启动的时候要向portmap程序注册.这样portmap程序就知道这些RPC server监听在哪个端口. 而RPC clien ...

  7. Python获取当前系统时间

    Python获取当前系统时间 import time #返回当前时间 def GetNowTime():     return time.strftime("%Y-%m-%d %H:%M:% ...

  8. [IOS/翻译]Core Services Layer

    本文是本人自己辛苦翻译的,请转载的朋友注明,翻译于Z.MJun的CSDN的博客 http://blog.csdn.net/Zheng_Paul,感谢. 翻译于2015年10月4日 Core Servi ...

  9. MySQL数据库数据迁移到SQLserver

    近期因工作须要.须要将mysql数据库迁移到sqlserver.不过数据迁移.因此相对照较简单.对于mysql迁移到sqlserver,我们须要使用到mysql odbc驱动,然后透过sqlserve ...

  10. 计算几何 二维凸包问题 Andrew算法

    凸包:把给定点包围在内部的.面积最小的凸多边形. Andrew算法是Graham算法的变种,速度更快稳定性也更好. 首先把全部点排序.依照第一keywordx第二keywordy从小到大排序,删除反复 ...