预加载的时候,拼接到盒子中,点击的时候不在拼接,或者点击的时候拼接,再次点击不拼接 20C
<!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的时候不在拼接
或者点击的时候拼接,再次点击不拼接。

现在就是多次点击多次拼接,该咋整呢?

2个回答

那就立个flag或者在点击之后接触button的点击事件就可以了吧。我没看代码,只看了你的需求,感觉这样是可行的。就是实现一次点击的效果。

lunhui1994_
Eighteen Z 回复是她丶: 或者你可以用jq的one方法或者使用jq的命名空间部分的知识来解绑自定义的事件。
2 年多之前 回复
Yueyongxiang
是她丶 我试过,应该是我不会写,flag = true,然后添加之后为flase是吗?
2 年多之前 回复

判断一下盒子中是否存在你拼接的字符串,
如果点击的时候盒子中存在,点击的时候就不再拼接,直接返回;
如果点击的时候盒子中不存在,点击的时候就拼接添加。
结果就是你的点击拼接这个位置需要加一个判断。

m0_38082783
Rattenking jquery的html方法,如果你其中只有哪一个字符串,你直接判断盒子中是不是空就可以了,如果为空,就说明需要添加,如果不为空,就说明有了,不用添加。
2 年多之前 回复
Yueyongxiang
是她丶 怎么获取拼接的字符啊?
2 年多之前 回复
Yueyongxiang
是她丶 我试试,谢谢哈。
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问