mui lazy loading GitHub source

2019.1.24
GitHub Source: https://github.com/dcloudio/mui/blob/master/examples/hello-mui/examples/lazyload-image.html
effect:
Here Insert Picture Description

to finish loading

Download js files yourself, go to the address above you can find

<!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>

-09-MUI MUI frame with back-end data exchange
https://blog.csdn.net/qq_40147863/article/details/82857401

mui lazy loading GitHub source

Guess you like