<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预加载测试</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.register{width: 200px;height: 200px;margin: 50px auto 0;}
.register input{width: 116px;margin-top:30px ;margin-left: 20px;}
.registerBtn{width: 200px;margin: 0 auto;margin-top: 20px;}
#WaitPage{display: none; margin: 0 auto;width: 300px;height: 300px;}
#WaitPage img{width: 300px;height: 250px;margin: 25px 0px 0;display: inline-block;}
.page{width: 500px;height: 300px;border: 1px solid black;margin: 0 auto;display: none;}
.page img{width: 90px;height: 80px;float: left; margin:5px 15px;}
.abtn{display: none;width: 40px;height: 20px;margin:30px 50px 30px 90px; float: left;}
</style>
</head>
<body>
<div class="box">
<!-- 登录页面 -->
<div class="register" id="register">
<span>账号</span><input type="text" /><br>
<span>密码</span><input type="password" /><br>
<button class="registerBtn" id="registerBtn">登录</button>
</div>
<!-- 等待页面 -->
<div id="WaitPage">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502705710958&di=150996093863b2d1a7253ecd096f9a7e&imgtype=0&src=http%3A%2F%2Fimg.qqzhi.com%2Fupload%2Fimg_5_1629951827D4010606170_21.jpg" >
</div>
<button class="abtn" id="btn1">Btn1</button>
<button class="abtn" id="btn2">Btn2</button>
<button class="abtn" id="btn3">Btn3</button>
<button class="abtn" id="btn4">Btn4</button>
<div style="clear: both;"></div>
<!-- 页面 -->
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
function imgloading(arr, idName, callback) {
// 需要一个盛放图片的 盒子
var box = document.getElementById(idName);
// 需要一个index值，做判断使用
var index = 0;
// 用于承载创建的图片对象
var imgObjs = [];
// 循环创建对象,并实现预加载
for(var i = 0; i < arr.length; i++) {
// 创建图片对象
var imgObj = new Image();
imgObj.onload = function() {
// 这个 index 可以获取到当前的length值
index++;
// 将加载好的图片添加到数组中
imgObjs.push(this);
// 调用加载进度方法,传当前的index的值
loadingProgress(index);
}
// 赋值数据源
imgObj.src = arr[i];
}
// 加载进度
function loadingProgress(index) {
// console.log(indexary);
// 判断
if(index == arr.length) {
// 如果index的值等同于数组长度,代表加载完毕
console.log(new Date());
callback(box, imgObjs);
}
}
}
var arr1 = ["http://weitu-650-water.bj.bcebos.com/233108469581.jpg@!water", "http://weitu-650-water.bj.bcebos.com/233108489667.jpg@!water", "http://weitu-650-water.bj.bcebos.com/233108735591.jpg@!water", "http://pic1.cxtuku.com/00/01/53/b0105f29cd15.jpg", "http://pic1.cxtuku.com/00/01/53/b0105f29cd15.jpg", "http://pic1.cxtuku.com/00/01/53/b0105f29cd15.jpg", "http://pic1.win4000.com/wallpaper/b/535f45c518b60.jpg", "http://img05.tooopen.com/images/20150701/tooopen_sy_132481769552.jpg", "http://pic25.nipic.com/20121206/7447430_133820812000_2.jpg", "http://f1.bj.anqu.com/down/OTkwNw==/allimg/1208/48-120R0153P9.jpg"];
var arr3 = ["http://pic.58pic.com/58pic/15/16/53/22458PIC7Xb_1024.jpg", "http://bizhi.zhuoku.com/2009/08/30/jingxuan/zhuoku018.jpg", "http://p1.yokacdn.com/pic/marry/look/2013/U395P1T117D789562F2577DT20130603133456_maxw808.jpg", "http://s1.dwstatic.com/group1/M00/87/42/bcc79336ab5f1a6bdf9c5f04e13e57cb.jpg", "http://s1.dwstatic.com/group1/M00/86/05/9f57d91b35148abbb43392e5a0a5c497.jpg", "http://gaopin-preview.bj.bcebos.com/133100460090.jpg@!420", "http://gaopin-preview.bj.bcebos.com/133100460089.jpg@!420", 'http://gaopin-preview.bj.bcebos.com/133200138213.jpg@!420']
var arr2 = ["http://t2.27270.com/uploads/tu/201708/15/6cc1680862_1.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843806342&di=0458a3c86b8b894f7fc432518cf23dab&imgtype=0&src=http%3A%2F%2Fd.5857.com%2Fkgzwcyx_130522%2F006.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843806873&di=b5ec72f343b9fee1be0824c868a32cc0&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201411%2F06%2F20141106215740_5KwPY.jpeg", "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1870718407,653952476&fm=26&gp=0.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843828446&di=6f878eeb6d95a8a078dcbcc84b1b0359&imgtype=0&src=http%3A%2F%2Fimg17.3lian.com%2Fd%2Ffile%2F201702%2F18%2Ff893c72914daab9327ebef41d8924a99.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843828443&di=5b4a417e25774f847ed8422051afb78e&imgtype=0&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F170214%2F140-1F214094P2.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843853165&di=2b0aaff0f2647f2b828e6cc9ae541cf3&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F582ac82b6f6e0.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843853704&di=4391aa0c8c78c489b5d4354c1b4979c9&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F546ae76e9eced.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1501843853703&di=499f89710e72a47bd49df9d12d0837dd&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F56e3c5979c62e.jpg"]
var arr4 = ["http://n.sinaimg.cn/news/20170804/MIUr-fyitapv7529224.jpg", "http://img01.sogoucdn.com/app/a/100540002/492265.jpg", "http://inews.gtimg.com/newsapp_match/0/1750701037/0", "http://img1.gtimg.com/zj/pics/hv1/9/153/2229/144979749.jpg", "http://p1.wmpic.me/article/2017/07/03/1499059680_WzCipcoE.jpg", "http://t2.27270.com/uploads/tu/201707/9999/78e130b360.jpg", "http://t2.27270.com/uploads/tu/201707/9999/848c20876f.jpg", "http://t2.27270.com/uploads/tu/201707/5820/56.jpg", "http://t2.27270.com/uploads/tu/201707/571/31.jpg", "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502439836&di=6bc1ded09d70cd90b124fb2e64b54daa&imgtype=jpg&er=1&src=http%3A%2F%2Fa2.att.hudong.com%2F12%2F06%2F01300337734975132668063106926.jpg"]
function loadingOver(id, imgObjs) {
$(id).css("display", "block");
// 需要更改的地方
for(var i = 0; i < imgObjs.length; i++) {
id.appendChild(imgObjs[i]);
}
$("#WaitPage").css("display", "none");
$(".abtn").css("display", "block");
setTimeout(function(){
imgloading(arr2,"page2",loadingOver1);
imgloading(arr3,"page3",loadingOver1);
imgloading(arr4,"page4",loadingOver1);
},2000)
}
function loadingOver1(id, imgObjs, indexary) {
// 需要更待的地方
for(var i = 0; i < imgObjs.length; i++) {
id.appendChild(imgObjs[i]);
}
}
$("#registerBtn").click(function() {
$(".register").css("display", "none");
$("#WaitPage").css("display", "block");
imgloading(arr1, "page1", loadingOver);
})
$("#btn1").click(function() {
$("#page1").css("display", "block");
$("#page2").css("display", "none");
$("#page3").css("display", "none");
$("#page4").css("display", "none");
imgloading(arr1, "page1", loadingOver);
})
$("#btn2").click(function() {
$("#page1").css("display", "none");
$("#page2").css("display", "block");
$("#page3").css("display", "none");
$("#page4").css("display", "none");
imgloading(arr2, "page2", loadingOver1);
})
$("#btn3").click(function() {
$("#page1").css("display", "none");
$("#page2").css("display", "none");
$("#page3").css("display", "block");
$("#page4").css("display", "none");
imgloading(arr3, "page3", loadingOver1);
})
$("#btn4").click(function() {
$("#page1").css("display", "none");
$("#page2").css("display", "none");
$("#page3").css("display", "none");
$("#page4").css("display", "block");
imgloading(arr4, "page4", loadingOver1);
})</script>
预加载的时候，拼接到盒子中，点击Button的时候不在拼接
或者点击的时候拼接，再次点击不拼接。
现在就是多次点击多次拼接，该咋整呢？
判断一下盒子中是否存在你拼接的字符串，
如果点击的时候盒子中存在，点击的时候就不再拼接，直接返回；
如果点击的时候盒子中不存在，点击的时候就拼接添加。
结果就是你的点击拼接这个位置需要加一个判断。
那就立个flag或者在点击之后接触button的点击事件就可以了吧。我没看代码，只看了你的需求，感觉这样是可行的。就是实现一次点击的效果。