JS实现图片预加载

最新推荐文章于 2024-03-17 23:17:34 发布

艺能人金广发

最新推荐文章于 2024-03-17 23:17:34 发布

阅读量200

点赞数

文章标签： javascript 前端 html

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

版权

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 {