JavaScript图片预加载

最新推荐文章于 2024-07-17 22:08:04 发布

小文又困了

最新推荐文章于 2024-07-17 22:08:04 发布

阅读量67

点赞数

分类专栏： Javascript学习文章标签： javascript 开发语言学习前端

本文链接：https://blog.csdn.net/weixin_58528567/article/details/133947531

版权

Javascript学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

JavaScript简单实现图片预加载功能
1.html代码部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片预加载</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            min-height: 500px;
            position: relative;
            margin: 0 auto;
        }

        ul li {
            float: left;
            padding: 5px;
            list-style: none;
        }

        ul li img {
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 10px;
            padding: 10px;
        }
    </style>
    //导入图片数据
    <script src="./myjson.js"></script>
</head>

<body>
    <ul id="myList"></ul>
</body>

</html>

2.JavaScript代码部分

		//获取到要插入图片位置的标签
        let ul = document.querySelector('ul')
        render(imglist)  //图片数据保存时已经是一个数组，如果不是可以转换一下
        // 预加载 需要一个默认图片
        function render(data) {
            let str = ''
            data.forEach((item, index) => {
                // 这里这时放入的是加载没完成时的图片
                //class是为了与预加载时的class相同，方便对应设置图片
                str += `<li><img  class='img-item${index}' src='./jiaz.gif'/></li>`
            });
            ul.innerHTML = str  //插入li
            loopload(data) //执行预加载
        }

        // 预加载函数  
        //形参i=0,默认值，如果不传值调用时i=0，反之i=传入的值
        function loopload(data, i = 0) {
            // 获取当前这条数据
            let it = data[i] 
            if (it) {
                // 创建img标签
                let img = new Image()
                // 设置src 缓存
                img.src = it.src
                // 图片加载完成以后 缓存结束 那么就应该设置到页面当中
                img.onload = () => {
                    document.querySelector(`.img-item${i}`).src = it.src
                    loopload(data, i + 1)
                    //调用是为了继续执行设置下一张图片，这时i得加1，图片才能匹配的上
                }

            }
        }