MUI懒加载
MUI懒加载
前端小谢 发表于10个月前
MUI懒加载
  • 发表于 10个月前
  • 阅读 441
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

在各种列表中,有些需要大量的图片,在这些列表结构中使用懒加载可以很快提高加载速度。我们需要引入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'
 });加载占位图片。

 

共有 人打赏支持
粉丝 6
博文 36
码字总数 10963
×
前端小谢
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: