文档章节

MUI懒加载

 前端小谢
发布于 2016/12/10 14:56
字数 381
阅读 497
收藏 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
0
vue开发看这篇文章就够了(下)

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

segmentfault
01/11
0
0
计划类应用--滴石

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

uikoo9
2015/03/05
2.2K
0
mui混合开发(三)

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

全村的希望iOS
01/10
0
0
mui混合开发(二)

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

全村的希望iOS
01/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

kernel version does not match DSO version

错误信息: kernel version 384.11 does not match DSO version 384.130.0 原因是: cuda driver版本太低,不匹配DSO 简单有效的修复方法,升级nvidia driver, 步骤如下: 1. google seach ...

刘小米
今天
0
0
maven坐标和依赖

一、maven坐标详解 <groupId>com.fgt.club</groupId><artifactId>club-common-service-facade</artifactId><version>3.0.0</version><packaging>jar</packaging> maven的坐标元素说......

老韭菜
今天
1
0
springmvc-servlet.xml配置表功能解释

问:<?xml version="1.0" encoding="UTF-8" ?> 答: xml version="1.0"表示是此xml文件的版本是1.0 encoding="UTF-8"表示此文件的编码方式是UTF-8 问:<!DOCTYPE beans PUBLIC "-//SPRING//......

隐士族隐逸
今天
1
0
基于TP5的微信的公众号获取登录用户信息

之前讲过微信的公众号自动登录的菜单配置,这次记录一下在TP5项目中获取自动登录的用户信息并存到数据库的操作 基本的流程为:微信设置自动登录的菜单—>访问的URL指定的函数里获取用户信息—...

月夜中徘徊
今天
0
0
youTrack

package jetbrains.teamsys.license.runtime; 计算lis package jetbrains.ring.license.reader; 验证lis 安装后先不要生成lis,要把相关文件进行替换 ring-license-checker-1.0.41.jar char......

max佩恩
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部