mui ajax 懒加载,MUI懒加载 - 前端小谢的个人空间 - OSCHINA - 中文开源技术交流社区...

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

懒加载

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 += '

'; //id="' + json[i].user_id + '"

str += '

';

str += ' ';

str += '

';

str += '

';

str += '

';

str += '

' + json[i].nick_name + '  ' + json[i].create_time2 + '

';

str += ' ' + json[i].txt + '';

str += '

';

str += '

';

str += '

';

}

$("#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();

});

注意点：1.引入两个文件的js有先后顺序。2.图片必须设置data-lazyload="'+imgURL+'"。3.调用mui(document).imageLazyload({

placeholder: 'images/60x60.gif'

});加载占位图片。