为啥把项目部署在服务器中，用浏览器访问，请求的同一个图片资源有的是200有的是canceled，求解答！（网页在html文件里，图片在img里）

问题描述：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show your choice</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
        /*
            分析：
                1.给开始按钮绑定单击事件
                    1.1 定义循环定时器
                    1.2 切换小相框的src属性
                        * 定义一个数组，数组中存放图片资源的路径
                        * 生成随机数，随机数为数组索引

                2.给结束按钮绑定单击事件
                    2.1 停止定时器
                    2.2 给大相框设置src属性
         */

        var imgs = ["../img/1.jpg",
                     "../img/2.jpg",
                    "../img/3.jpg",
                    "../img/4.jpg",
                    "../img/5.jpg",
                    "../img/6.jpg",
                    "../img/7.jpg",
                    "../img/8.jpg",
                    "../img/9.jpg",
                    "../img/10.jpg",
                    "../img/11.jpg",
                    "../img/12.jpg",
                    "../img/13.jpg",
                    "../img/14.jpg",
                    "../img/15.jpg",
                    "../img/16.jpg",
                    "../img/17.jpg",
                    "../img/18.jpg",
                    "../img/19.jpg",
                    "../img/20.jpg",
                    "../img/21.jpg",
                    "../img/22.jpg",
                    "../img/23.jpg",
                    "../img/24.jpg",
                    "../img/25.jpg",
                    "../img/26.jpg",
                    "../img/27.jpg",
                    "../img/28.jpg",
                    "../img/29.jpg",
                    "../img/30.jpg"
        ];
        var startId;//开始定时器的id
        var index;//索引
        $(function () {
            //处理按钮是否可以使用的效果
            $("#startID").prop("disabled", false);
            $("#stopID").prop("disabled", true);

            //1.给开始按钮绑定单击事件
            $("#startID").click(function () {
                //1.1 定义循环定时器 50ms执行一次
                startId = setInterval(function () {

                    $("#startID").prop("disabled", true);
                    $("#stopID").prop("disabled", false);

                    //1.2 生成随机角标0-10
                    index = Math.floor(Math.random() * 31);//有几个图片，就 * (图片个数+1)
                    //1.3 设置小相框的src属性
                    $("#img1ID").prop("src", imgs[index]);

                }, 50);
            });

            //2.给结束按钮绑定单击事件
            $("#stopID").click(function () {

                $("#startID").prop("disabled", false);
                $("#stopID").prop("disabled", true);
                //2.1 停止定时器
                clearInterval(startId);
                //2.2 给大相框设置src属性
                $("#img2ID").prop("src", imgs[index]).hide();
                //1秒后显示
                $("#img2ID").show(1000)
            });


        });
    </script>

</head>
<body>
<!--小相框-->
<div style="border-style: dotted;width: 160px;height: 100px">
    <img id="img1ID" src="../img/0.jpg" style="width: 160px;height: 100px"/>
</div>

<!--大相框-->
<div style="border-style: double;width: 800px;height: 500px;position: absolute;left: 500px;top: 10px">
    <img id="img2ID" src="../img/0.jpg" style="width: 800px;height: 500px"/>
</div>

<!--开始按钮-->
<input id="startID" type="button" value="点击开始" style="width: 150px;height: 150px;font-size: 22px">

<!--停止按钮-->
<input id="stopID" type="button" value="点击停止" style="width: 150px;height: 150px;font-size: 22px">

</body>
</html>

答

请求过的重复的就不用重复请求了，不重复的200就是正常请求响应。

答

设置img的src未加载完毕前又设置，chrome会自动停止未加载完成的图片，此时状态就是canceled。

答

200就是访问正常，是不是部分图片不支持网页访问？

为啥把项目部署在服务器中，用浏览器访问，请求的同一个图片资源有的是200有的是canceled，求解答！（网页在html文件里，图片在img里）

相关推荐