<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <title>懒加载</title>

        <link rel="stylesheet" href="../css/mui.min.css" />

    </head>

    <body>

        <header class="mui-bar mui-bar-nav">

            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

            <h1 class="mui-title">lazyload（延迟加载） </h1>

        </header>

        <div class="mui-content">

            <ul id="list" class="mui-table-view mui-table-view-chevron">

                <li class="mui-table-view-cell mui-media">

                    <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>

                </li>

            </ul>

        </div>

        <script type="text/javascript" src="../js/mui.min.js" ></script>

        <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>

        <script type="text/javascript" src="../js/mui.lazyload.js" ></script>

        <script type="text/javascript" src="../js/mui.lazyload.img.js" ></script>

        <script type="text/javascript">

            mui.init();

            (function($) {

                var list = document.getElementById("list");

                $(document).imageLazyload({

                    placeholder: '../img/defaultSmall.jpg',

                });

            })(mui);

        </script>

    </body>

</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. noip模拟赛 fateice-string

    题目背景 Aldnoah ——火星上超古代文明留下的能量源,承认初代火星移民雷伊·雷加利亚博士(即后来的薇瑟帝国初代皇帝)为正统继承者,启动因子融入皇族的遗传因子中,只有皇族天生具有Aldnoah的启 ...

  2. springCloud学习-服务的注册与发现（Eureka）

    1.小记 这段时间有空,把springcloud的知识整理一下,好记性不如烂笔头,也让自己对springcloud有个清晰的认识.此次的整理记录主要借鉴了这位大佬的博客 https://blog.cs ...

  3. 开启mysql远程连接

    mysql默认只允许本地连接,也就是说,在安装完mysql后会存在两个root账户,他们的host分别是localhost和127.0.0.1 use mysql; update user set h ...

  4. 洛谷 P1186 玛丽卡

    P1186 玛丽卡 题目描述 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们知道 ...

  5. N天学习一个Linux命令之sudo

    前言 新项目打算采用运维搭建的发布系统发代码,发布后生效前需要做一些处理,因为发布系统登录目标机器使用的是非root账号,所以需要使用sudo来提升权限.当执行sudo cd /xxx/xx时会提示报 ...

  6. [Java][Spring][scurity]同步session控制，防止一个用户多次登录

    [Spring][scurity]同步session控制.防止一个用户多次登录 假设你希望限制单个用户仅仅能登录到你的程序一次,Spring Security通过加入以下简单的部分支持这个功能. 1. ...

  7. 【Linux】Ubuntu 开机默认亮度改动方法

    换了ubuntu 之后.发现开机屏幕都是"最大亮度",每次都要到设置中手动调节,非常麻烦.于是想到去改动这个设置.Google一通,别人可行的办法到我这就没用了.郁闷.最后是在st ...

  8. WPF中控件TextBlock使用（简单）

    TextBlock主要用来显示文字.比方: <TextBlock Name="txtBlockOutpuMessage"   Text="hello" / ...

  9. HDU3183 RMQ/贪心

    A Magic Lamp Problem Description Kiki likes traveling. One day she finds a magic lamp, unfortunately ...

  10. Linux下使用popen()执行shell命令【转】

    本文转载自:https://my.oschina.net/u/727148/blog/262987 函数原型: #include “stdio.h” FILE popen( const char co ...