问答详情
源自:2-3 实例1图片相册之使用预加载

预加载页无效

为什么我的加载页没效果,直接重0就跳过去了,调试看数组也遍历过了,就是没执行触发load事件后的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片预加载之无序加载</title>
    <script src="../js/jquery.min.1.7.js"></script>

    <style>

        html,body{
            height: 100%;
        }

        .box{
            text-align: center;
        }

        .btn,.btn:link{

            display: inline-block;
            text-decoration: none;
            height: 30px;
            line-height: 30px;
            border: 1px #cccccc solid;
            background: #ffffff;
            padding: 0px 10px;
            margin-right: 50px;
            color: #333333;

        }
        .btn:hover{
            background: #dddddd;
        }
        .loading{
            position: fixed;
            top:0;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #eeeeee;
            text-align: center;
            font-size: 30px;

        }
        .progress{
            margin-top: 300px;
        }

    </style>

</head>
<body>


    <div>
        <p>0</p>

    </div>

    <div>

        <img id="img" src="../imgs/1.jpg" alt="pic" height="800" width="960"/>

        <p>
            <a href="#" data-control="prev">上一页</a>
            <a href="#" data-control="next">下一页</a>
        </p>


    </div>
    <script>

        var imgs = ['../imgs/1.jpg','../imgs/2.jpg','../imgs/3.jpg','../imgs/4.jpg','../imgs/5.jpg'];

        var now = 0;
        var len = imgs.length;
        var count = 0;
        $progress = $('.progress');

        $('.btn').on('click',function () {
            if($(this).data('control') ==='prev'){

                /*now先自减1再和0比较 若小于0则赋给now*/
               now = Math.max(0,--now);
            }else if($(this).data('control') ==='next'){
                now = Math.min(len-1,++now);
            }
            document.title = (now+1)+"/"+len
            $('#img').attr('src',imgs[now]);

        });


        $.each(imgs,function (i,src) {

            /*图片加载完会触发load事件,出错触发error事件*/
            var imgObj = new Image();

            /*绑定load事件*/
            $(imgObj).on('load',function () {



                $progress.html(Math.round(count+1/len * 100)+'%');

                if(count>=len-1){
                    $('.loading').hide();
                    document.title='1/'+len;
                }
                count++;

            });

            imgObj.src = src;
        });

    </script>

</body>
</html>


提问者:路人Bing 2017-04-27 21:00

个回答

  • 呀_明静
    2017-05-10 15:14:24

    $('#img').attr('src',imgs[now]);和imgObj.src = src;   前者是从数组中获取图片的路径,后者又是干什么啦……

  • 路人Bing
    2017-04-27 21:48:44

    问题差不多想清楚了,我的图片太大,有的浏览器不显示,有的从缓存拿还需要一段时间