使用ajax进行预加载 

 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     <script>
11         window.onload=function(){
12             var xhr1=null,xhr2=null, xhr3=null;
13             setTimeout(function(){
14                 //实例化请求对象
15                 xhr1=new XMLHttpRequest();
16                 //创建请求
17                 xhr1.open('get','https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js',true)
18                 //向后台发送请求
19                 xhr1.send()
20 
21                 xhr2=new XMLHttpRequest();
22                 xhr2.open('get','https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.cjs.js',true)
23                 xhr2.send()
24 
25                 xhr3=new XMLHttpRequest();
26                 xhr3.open('get','https://cdn.bootcdn.net/ajax/libs/react/17.0.1/cjs/react-jsx-dev-runtime.development.js',true)
27                 xhr3.send()
28                 //以上是为了把数据先进行缓存起来
29 
30                 //onreadystatechange进行事件的获取，不使用的话数据获取不到
31                 xhr2.onreadystatechange=function(){
32                     if(xhr2.readyState==4 &&xhr2.status==200){
33                         console.log(xhr2.responseText);
34                     }
35                 }
36             },3000)
37         }
38     </script>
39 </body>
40 </html>

 

posted @ 2021-03-07 16:16  东功  阅读(326)  评论(0)    收藏  举报