2019.1.24
GitHub源码:https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/lazyload-image.html
效果:
完成加载
自行下载js文件,去上面的地址找就可以
<!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="mui/css/mui.min.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="mui/js/mui.min.js "></script>
<script src="mui/js/mui.lazyload.js"></script>
<script src="mui/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: './img/60x60.gif'
});
})(mui);
</script>
</html>
MUI框架-09-MUI 与后台数据交互
https://blog.csdn.net/qq_40147863/article/details/82857401