mui 懒加载 GitHub源

最新推荐文章于 2021-08-05 19:48:37 发布

宝儿的程序生涯

最新推荐文章于 2021-08-05 19:48:37 发布

阅读量602

点赞数

分类专栏： mui

本文链接：https://blog.youkuaiyun.com/fengtingYan/article/details/86623774

版权

mui 专栏收录该内容

11 篇文章

订阅专栏

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.youkuaiyun.com/qq_40147863/article/details/82857401