javascript预加载图片方法汇总_java sript怎么预加载图片?-优快云博客

本文详细介绍了使用CSS预加载和JavaScript优化网页加载速度的方法，包括使用CSS伪类实现图像预加载，通过JavaScript动态设置背景图片，以及使用Ajax加载CSS和JavaScript文件。同时，还提供了解决方案来确保所有图像在页面加载前预先加载，以提升用户体验。

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

1. 纯CSS：

 
         #preload
         -01 
          {
        
 
         background
         : 
         url
         (http://domain.tld/image
         -01
         .png) 
         no-repeat 
          -9999px 
          -9999px
         ;
        
 
         }
        
 
         #preload
         -02 
          {
        
 
         background
         : 
         url
         (http://domain.tld/image
         -02
         .png) 
         no-repeat 
          -9999px 
          -9999px
         ;
        
 
         }
        
 
         #preload
         -03 
          {
        
 
         background
         : 
         url
         (http://domain.tld/image
         -03
         .png) 
         no-repeat 
          -9999px 
          -9999px
         ;
        
 
         }
        

2. JS+CSS优化：

 
         // better image preloading @  http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
        
         function 
          preloader() {
        
         if 
          (document.getElementById) {
        
         document.getElementById(
         "preload-01"
         ).style.background = 
         "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px"
         ;
        
         document.getElementById(
         "preload-02"
         ).style.background = 
         "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px"
         ;
        
         document.getElementById(
         "preload-03"
         ).style.background = 
         "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px"
         ;
        
         }
        
         }
        
         function 
          addLoadEvent(func) {
        
         var 
          oldonload = window.onload;
        
         if 
          (
         typeof 
          window.onload != 
         'function'
         ) {
        
         window.onload = func;
        
         } 
         else 
          {
        
         window.onload = 
         function
         () {
        
         if 
          (oldonload) {
        
         oldonload();
        
         }
        
         func();
        
         }
        
         }
        
         }
        
         addLoadEvent(preloader);

3. JS代码1：

 
         <div class=
         "hidden"
         >
        
         <script type=
         "text/javascript"
         >
        
         <!--
         //--><![CDATA[//><!--
        
         var 
          images = 
         new 
          Array()
        
         function 
          preload() {
        
         for 
          (i = 0; i < preload.arguments.length; i++) {
        
         images[i] = 
         new 
          Image()
        
         images[i].src = preload.arguments[i]
        
         }
        
         }
        
         preload(
        
         "http://domain.tld/gallery/image-001.jpg"
         ,
        
         "http://domain.tld/gallery/image-002.jpg"
         ,
        
         "http://domain.tld/gallery/image-003.jpg"
        
         )
        
         //--><!]]>
        
         </script>
        
         </div>

4. JS代码2：

 
         <div class=
         "hidden"
         >
        
         <script type=
         "text/javascript"
         >
        
         <!--
         //--><![CDATA[//><!--
        
         if 
          (document.images) {
        
         img1 = 
         new 
          Image();
        
         img2 = 
         new 
          Image();
        
         img3 = 
         new 
          Image();
        
         img1.src = 
         "http://domain.tld/path/to/image-001.gif"
         ;
        
         img2.src = 
         "http://domain.tld/path/to/image-002.gif"
         ;
        
         img3.src = 
         "http://domain.tld/path/to/image-003.gif"
         ;
        
         }
        
         //--><!]]>
        
         </script>
        
         </div>

5. JS代码优化2：

 
         function 
          preloader() {
        
         if 
          (document.images) {
        
         var 
          img1 = 
         new 
          Image();
        
         var 
          img2 = 
         new 
          Image();
        
         var 
          img3 = 
         new 
          Image();
        
         img1.src = 
         "http://domain.tld/path/to/image-001.gif"
         ;
        
         img2.src = 
         "http://domain.tld/path/to/image-002.gif"
         ;
        
         img3.src = 
         "http://domain.tld/path/to/image-003.gif"
         ;
        
         }
        
         }
        
         function 
          addLoadEvent(func) {
        
         var 
          oldonload = window.onload;
        
         if 
          (
         typeof 
          window.onload != 
         'function'
         ) {
        
         window.onload = func;
        
         } 
         else 
          {
        
         window.onload = 
         function
         () {
        
         if 
          (oldonload) {
        
         oldonload();
        
         }
        
         func();
        
         }
        
         }
        
         }
        
         addLoadEvent(preloader);

6. Ajax代码1：

 
         window.onload = 
         function
         () {
        
         setTimeout(
         function
         () {
        
         // XHR to request a JS and a CSS
        
         var 
          xhr = 
         new 
          XMLHttpRequest();
        
         xhr.open(
         'GET'
         , 
         'http://domain.tld/preload.js'
         );
        
         xhr.send(
         ''
         );
        
         xhr = 
         new 
          XMLHttpRequest();
        
         xhr.open(
         'GET'
         , 
         'http://domain.tld/preload.css'
         );
        
         xhr.send(
         ''
         );
        
         // preload image
        
         new 
          Image().src = 
         "http://domain.tld/preload.png"
         ;
        
         }, 1000);
        
         };

7. Ajax代码2：

 
         window.onload = 
         function
         () {
        
         setTimeout(
         function
         () {
        
         // reference to <head>
        
         var 
          head = document.getElementsByTagName(
         'head'
         )[0];
        
         // a new CSS
        
         var 
          css = document.createElement(
         'link'
         );
        
         css.type = 
         "text/css"
         ;
        
         css.rel = 
         "stylesheet"
         ;
        
         css.href = 
         "http://domain.tld/preload.css"
         ;
        
         // a new JS
        
         var 
          js = document.createElement(
         "script"
         );
        
         js.type = 
         "text/javascript"
         ;
        
         js.src = 
         "http://domain.tld/preload.js"
         ;
        
         // preload JS and CSS
        
         head.appendChild(css);
        
         head.appendChild(js);
        
         // preload image
        
         new 
          Image().src = 
         "http://domain.tld/preload.png"
         ;
        
         }, 1000);
        
         };

源引：http://www.jb51.net/article/67850.htm