73 lines
2.3 KiB
HTML
73 lines
2.3 KiB
HTML
<!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> |