文档章节

MUI懒加载

 前端小谢
发布于 2016/12/10 14:56
字数 381
阅读 485
收藏 0
点赞 0
评论 0

在各种列表中,有些需要大量的图片,在这些列表结构中使用懒加载可以很快提高加载速度。我们需要引入mui.lazyload.js和mui.lazyload.img.js两个文件,还有占位图。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>懒加载</title>
        <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">
        <!--标准mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <script src="js/mui.min.js "></script>
        <script src="js/mui.lazyload.js"></script>
        <script src="js/mui.lazyload.img.js"></script>
    </head>

    <body>
        <div class="mui-content">
             <div id="list_container"></div>
        </div>
    </body>
    
   
    <script>
          window.page = {
            fk: {},
            fn: {
                getDongTai: function () {
                    try {
                        $.ajax({
                            type: "GET",
                            url: webconfig.domain + "Handlers/CustomerHandler.ashx?go=dongtai_list",
                            data: {},
                            cache: false,//设为false不会读缓存
                            dataType: 'json',   //data type from server,format like:'text','html','json','xml'……
                            success: function (data) {

                                if (data.r) {
                                    var json = eval(data.d);
									    

                                    var str = "";
                                    for (var i = 0; i < json.length; i++) {
                                        var imgs = json[i].imgs ? (webconfig.domain + "handlers/filehandler.ashx?go=load&path=" + json[i].imgs) : "images/cbd.jpg";

                                        str += '<div class="mui-card" link_id="' + json[i].dongtai_id + '">'; //id="' + json[i].user_id + '"
                                        str += '       <div class="mui-card-header mui-card-media mui_tupian" >';
                                        str += '           <img class="dongtai_tu" data-lazyload="'+imgs+'">';
                                        str += '       </div>';
                                        str += '       <div class="mui-card-content">';
                                        str += '         	<div class="mui-card-content-inner">';
                                        str += '               <p>' + json[i].nick_name + '&nbsp;&nbsp;' + json[i].create_time2 + '</p>';
                                        str += '               <span class="share_text">' + json[i].txt + '</span>';
                                        str += '            </div>';
                                        str += '       </div>';
                                        str += '</div>';
                                        
                                      
                                    }
                
                    			   $("#list_container").append(str);
                    			    mui(document).imageLazyload({
					                    placeholder: 'images/60x60.gif'
					                });
                                  
                                    mui("#list_container").on("tap", ".mui-card", function (x) {
                                        var dongtai_id = this.getAttribute('dongtai_id'); //$(this).attr('guide_id');
                                        mui.openWindow("zijiayou.html?id=" + dongtai_id);
                                    });
                                } else { mui.alert(data.i); }
                            },
                            complete: function (x, y, z) {
                                if (x.status != 200) { mui.alert(x.responseText); }
                            }
                        });
                    } catch (ex) {
                        mui.alert(ex.message);
                    }

                }
            },
            init: function () {
                page.fn.getDongTai();


                //首页轮播
                mui("#slider").slider({
                    interval: 5000
                });

                //说点什么点击事件
                document.getElementById("share_talk").addEventListener("tap", function () {
                    mui.openWindow("fabu_dongtai.html");
                });
            }
        };

			
			mui.plusReady(function() {

				window.page.init();

			});

    </script>
</html>

注意点:1.引入两个文件的js有先后顺序。2.图片必须设置data-lazyload="'+imgURL+'"。3.调用mui(document).imageLazyload({
       placeholder: 'images/60x60.gif'
 });加载占位图片。

 

© 著作权归作者所有

共有 人打赏支持
粉丝 5
博文 36
码字总数 10963
作品 0
程序员
MUI重置上拉加载完美解决方案

简述:mui混合开发遇到这样的问题解决好就,一个列表进行分页加载数据下拉刷新请求前10条数据,上拉加载如果大于10条提示上拉加载更多,如果小于10条提示没有更多数据,当你上拉加载没有更多...

全村的希望iOS ⋅ 01/13 ⋅ 0

vue开发看这篇文章就够了(下)

摘要:作者整理的内容非常全面了,学习Vue的同学值得收藏下这篇文章。 Loaders(加载器) webpack - Loaders webpack - 管理资源示例 webpack enables use of loaders to preprocess files. ...

segmentfault ⋅ 01/11 ⋅ 0

mui混合开发(三)

简述:当我们点击一个页面要向iOS原生一样动画过渡到下一个页面,mui的方式是打开子页面。 注意:重点说一下我遇到的问题打开子页面mui会创建一个新的webView,当你执行mui.back()这个页面会...

全村的希望iOS ⋅ 01/10 ⋅ 0

计划类应用--滴石

取水滴石穿之意,计划类app,一切始于计划成于计划。 使用html5+ + mui+hbuilder构建 基于html5+规范 HTML5中国产业联盟,简称“HTML5+联盟”,是为了更好的推进HTML5的商用、更好的为HTML5...

uikoo9 ⋅ 2015/03/05 ⋅ 0

mui混合开发(二)

简述:混合App的流畅性不比原生的App,当网络不好的时候出现空白页面体验很不好,mui文档给出了两个解决方案,方案一很简单,方案二是预加载模式下一章节配合mui自定义事件详细讲解 一:打开...

全村的希望iOS ⋅ 01/10 ⋅ 0

mui混合开发(一)

简述:本来是一个iOS原生程序员,但是公司最近需要混合开用的是mui框架,说实话这个框架流畅性很开,但是也有一些问题,不过对于大多数的App都能适用,接下来把用的东西整理出来分享给大家 ...

全村的希望iOS ⋅ 01/10 ⋅ 0

目录服务器诊断

C:Usersweihongadmin>repadmin /showrepl Repadmin: 针对所有 DC localhost 运行命令 /showrepl Default-First-SiteWIN2008-DC DSA 选项: IS_GC 站点选项: (none) DSA 对象 GUID: a7ab7fb8-a......

zxs_vs_zxs ⋅ 2017/07/17 ⋅ 0

娇娇jojo/模态弹窗

这是我自己写的一个小小模态弹窗插件(基于zepto,主要针对移动端),界面简洁(模拟IOS模态弹窗设计),喜欢的可以拿去使用哈~~ 目前只支持2种状态:确认弹窗和模态弹窗(根据popStatus区分...

娇娇jojo ⋅ 2017/10/18 ⋅ 0

武侯/mui-vue2

mui-vue2 基于mui+vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试,可以直接下载安装点此链接APP下载。 项目文...

武侯 ⋅ 2017/12/30 ⋅ 0

ASP.NET MVC做的微信WEBAPP中调用微信JSSDK扫一扫

今天做一个项目,是在微信上用的,微信WEB APP,里面用到了调用手机摄像头扫一扫二维码的功能,记得以前某个项目里写有的,但是找不到之前那个项目源码了,想复制粘贴也复制不了了,只好对着...

niunan ⋅ 2017/06/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++内存映射文件居然是这样?!

内存映射文件大家都时不时听过,但它到底是个什么?赶紧来看看吧 内存映射文件到底是干嘛的呢?让我们先来思考下面几个问题: 如果您想读的内容大于系统分配的内存块怎么办?如果您想搜索的字...

柳猫 ⋅ 29分钟前 ⋅ 0

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 今天 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部