图片预加载与addLoadEvent_webpack 图片预加载-优快云博客

本文介绍如何处理页面加载事件以确保多个回调函数都能被执行，并提供了几种图片预加载的方法，包括使用CSS、JavaScript和AJAX等技术手段。

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

1、页面加载完成会触发onload事件，但是我们不能这样写：

window.onload =function1;
window.onload = function2;
//这样只能执行一个函数

所以这个函数诞生了———addLoadEvent

function addLoadEvent(func){  
        var oldonLoad = window.onload;  
        if(typeof window.onload!='function'){  
                window.onload = func;  
        }  
        else{  
            window.onload = function(){  
                oldonload();  
                func();  
            }  
        }  
}

调用只需要这样：

addLoadEvent(function1);
addLoadEvent(function2);

2、图片预加载
①纯css

div1{
    background：url('预加载的图片地址') no-repeat 9999px 9999px;
}

缺点：首次加载的量比较大，当然可以用addLoadEvent()来调用
②用js

var img = [];
function preload(){
    for(var i=0;i<preload.arguments.length;i+){
        img[i]=new Image();
        img[i].src =preload.arguments[i]; 
    }
}
addLoadEvent(preload('图片地址1','图片地址2'))

③用ajax，更厉害了


window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '图片地址';);//也可改进下作为参数传进来
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', ';);
        xhr.send('');
        // preload image
        new Image().src = ";;
    }, 1000);
};