用CSS和JavaScript实现预加载

使用CSS和JavaScript实现预加载

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <div id="preload1"></div>
11     <div id="preload2"></div>
12     <div id="preload3"></div>
13     <div id="preload4"></div>
14     <script>
15         //将需要加载的图片封装到函数中
16         function preLoad(){
17             if(document.getElementById){
18                 document.getElementById('preload1').style.background='url(./images/001.jpg) no-repeat -99999px -99999px'
19                 document.getElementById('preload2').style.background='url(./images/002.jpg) no-repeat -99999px -99999px'
20                 document.getElementById('preload3').style.background='url(./images/003.jpg) no-repeat -99999px -99999px'
21                 document.getElementById('preload4').style.background='url(./images/004.jpg) no-repeat -99999px -99999px'
22             }
23         }
24         //监听页面是否完成，页面完成才进行预加载
25         function addEvent(fn){
26             var load=window.onload;
27             if(typeof load=='function'){
28                 load=fn
29             }else{
30                 if(load){
31                     load()
32                 }
33                 fn()
34             }
35         }
36         addEvent(preLoad)
37     </script>
38 </body>
39 </html>

注释：再浏览器的加载中，打开检查，点看source，如果没调用函数的话没有图片，调用函数会出现放图片的文件夹

posted @ 2021-03-07 15:38  东功  阅读(387)  评论(0)  编辑  收藏  举报