<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8">
|
<title>Hello MUI</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">
|
<!--App自定义的css-->
|
<link rel="stylesheet" type="text/css" href="../css/app.css" />
|
<style type="text/css">
|
p {
|
text-indent: 22px;
|
}
|
.des {
|
margin: .5em 0;
|
}
|
.des>li {
|
font-size: 14px;
|
color: #8f8f94;
|
}
|
</style>
|
</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">
|
<div class="mui-content-padded">
|
<p>延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：</p>
|
<ul class="des">
|
<li>加快页面渲染速度</li>
|
<li>提升页面滚动性能</li>
|
<li>默认不下载屏幕外的图片，减少网络流量</li>
|
</ul>
|
</div>
|
<ul id="list" class="mui-table-view mui-table-view-chevron">
|
|
</ul>
|
</div>
|
</body>
|
<script src="../js/mui.min.js "></script>
|
<script src="../js/mui.lazyload.js"></script>
|
<script src="../js/mui.lazyload.img.js"></script>
|
<script>
|
mui.init();
|
var createFragment = function(count) {
|
var fragment = document.createDocumentFragment();
|
var li;
|
for (var i = 0; i < count; i++) {
|
li = document.createElement('li');
|
li.className = 'mui-table-view-cell mui-media';
|
li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';
|
fragment.appendChild(li);
|
}
|
return fragment;
|
};
|
(function($) {
|
var list = document.getElementById("list");
|
list.appendChild(createFragment(50));
|
$(document).imageLazyload({
|
placeholder: '../images/60x60.gif'
|
});
|
})(mui);
|
</script>
|
|
</html>
|
