预加载图像 - anlinmb个人前端代码库

预加载图片,我们提供了预加载函数:

anlin.loading({参数对象});

使用anlin-mb内置的预加载函数时在使用函数之前引用anlin-mb.js文件

参数对象表
参数	说明
img:	加载的图片url,数组形式,如: ['图片路径1','图片路径2','图片路径3'...]
lo:	加载时运行的回调函数,返回一个百分比字符串,function(a){...}
f:	所有图片加载完成后运行的回调函数,function(){alert('图片加载完成');}
err:	加载出错时的回调函数,function(a,b){...}它有两个参数:a继续请求当前出错的图片,b跳过错误请求下一个图片

例子如下

<div id="anlin-mb-home" class="qjk" style="max-width:100%;overflow-y:auto;display:block;background:#000;">
<div id="" class="juzon" style="width:100%;font-size:150%;text-align:center;font-weight:bold;color:#fff;"><img src="https://loading.io/mod/spinner/dual-ball/index.svg" style="max-height:100px;">
<br><br>
<b id="anlin-mb-lo">0%</b><br>
<font id="anlin-mb-tips">数据加载中...</font>
</div>
</div>
<script>
var aimg=[
'/image/1.jpeg',
'/image/2.jpeg'
];
var erri=0;//错误计数
anlin.loading({
img:aimg,
lo:function(a){
$('#anlin-mb-tips').text('数据加载中...');
$('#anlin-mb-lo').text(a);//a返回当前%
},
f:function(){
$('#anlin-mb-home').remove();
alert('图片加载完成');
},
err:function(a,b){
$('#anlin-mb-tips').text('数据加载失败,正在重试');
erri++;
if(erri<2){
setTimeout(function(){a();},1000);
}else{
$('#anlin-mb-tips').text('请求超过2次,已跳过该错误');
setTimeout(function(){b();},1000);
}
}
});
</script>
<img src="/image/1.jpeg" style="width:200px;">
<img src="/image/2.jpeg" style="width:200px;">

<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="referrer" content="never">
		<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
		 <link href="/css/anlin-mb.css?1758028534" rel="stylesheet">
	<script type="text/javascript" src="/anlin-mb.js?1758028534"></script>
</head>
<body onload="anlin.loadhd();">
<div id="anlin-mb-home" class="qjk" style="max-width:100%;overflow-y:auto;display:block;background:#000;">
<div id="" class="juzon" style="width:100%;font-size:150%;text-align:center;font-weight:bold;color:#fff;"><img src="https://loading.io/mod/spinner/dual-ball/index.svg" style="max-height:100px;">
<br><br>
<b id="anlin-mb-lo">0%</b><br>
<font id="anlin-mb-tips">数据加载中...</font>
</div>
</div>
<script>
var aimg=[
'/image/1.jpeg',
'/image/2.jpeg'
];
var erri=0;//错误计数
anlin.loading({
img:aimg,
lo:function(a){
$('#anlin-mb-tips').text('数据加载中...');
$('#anlin-mb-lo').text(a);//a返回当前%
},
f:function(){
$('#anlin-mb-home').remove();
alert('图片加载完成');
},
err:function(a,b){
$('#anlin-mb-tips').text('数据加载失败,正在重试');
erri++;
if(erri<2){
setTimeout(function(){a();},1000);
}else{
$('#anlin-mb-tips').text('请求超过2次,已跳过该错误');
setTimeout(function(){b();},1000);
}
}
});
</script>
<img src="/image/1.jpeg" style="width:200px;">
<img src="/image/2.jpeg" style="width:200px;">

</body>
</html>