js 预加载

最新推荐文章于 2025-06-28 10:55:11 发布

奋斗的小小骚年

最新推荐文章于 2025-06-28 10:55:11 发布

阅读量906

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_41654985/article/details/79773298

JavaScript 专栏收录该内容

33 篇文章

订阅专栏

本文展示了一个使用纯HTML、CSS和JavaScript实现的图片预加载示例，并通过修改div元素的宽度来创建简单的动画效果。代码中包含了图片数组的生成、事件监听器的设置以及定时器的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div
        {
            width: 0;
            height: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
<div></div>
    <script>
        var arr=[];
        var imgList=[];
        for(var i=1;i<80;i++){
            arr.push("img/"+i+"-.jpg");
        }
        var sum=0;
        var img=new Image();
        img.addEventListener("load",loadHandler);
        img.src=arr[0];
        function loadHandler(e) {
            e=e || window.event;
            var imgs=this.cloneNode(false);
          imgList.push(imgs);
           sum++;
            bool=true;
           if(sum>arr.length-1)
           {
               console.log(imgList);
               return;
           }
           this.src=arr[sum];
        }
       var div=document.querySelector("div");
        setInterval(animation,16);
        var bool=false;
        function animation() {
            if(!bool) return;
            if(div.offsetWidth>sum*5){
                bool=false;
                return;
            }
            div.style.width=div.offsetWidth+5+"px";
        }
    </script>
</body>
</html>