JavaScript实现图片预加载技术-CSDN博客

本文链接：https://blog.csdn.net/Chico_Feng/article/details/128176339

本文介绍了如何使用JavaScript进行图片预加载，以提高网页性能。通过编写特定的JS代码，可以确保图片在页面显示前已经加载完成，避免了用户等待图片加载时的空白情况，提升了用户体验。

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

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

JS代码

    var box = document.querySelector('div')
    // 创建图片预加载模块
    var imgCreate=(function(){
        // 创建一个图片元素
        var img1 = document.createElement('img')
        // 创建图片对象
        var img2 = new Image()
        // onload事件，图片加载完成后触发
        img2.onload = function() {
            // 将img2的src属性值赋值给img1的src属性
            img1.src = this.src
        }
        // 以对象返回内容
        return {
            setSrc: function(ele,src1) {
                // 把img1追加进ele对象中
                ele.appendChild(img1)
                // 给当前img1对象添加src属性
                img1.src = './imges/loading2.gif'
                // 把传入的图片地址赋值给img2对象进行加载
                img2.src = src1
            }
        }
    })()
    imgCreate.setSrc(box,'https://ts4.cn.mm.bing.net/th?id=ORMS.e733b725594b33f87f2df1e7ee53b00b&pid=Wdp&w=300&h=156&qlt=90&c=1&rs=1&dpr=1.25&p=0')

JS实现图片预加载