前端优化-图片预加载

一、css、js、css+js

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 ; }

该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间。为了解决这个问题，我们增加了一些JavaScript代码，来推迟预加载的时间，直到页面加载完毕。

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);

在该脚本的第一部分，我们获取使用类选择器的元素，并为其设置了background属性，以预加载不同的图片。

该脚本的第二部分，我们使用addLoadEvent()函数来延迟preloader()函数的加载时间，直到页面加载完毕。

如果JavaScript无法在用户的浏览器中正常运行，会发生什么？很简单，图片不会被预加载，当页面调用图片时，正常显示即可。

js：

上述方法有时确实很高效，但我们逐渐发现它在实际实现过程中会耗费太多时间。相反，我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法，它们可以很漂亮地工作于所有现代浏览器之上。

<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>

该方法尤其适用预加载大量的图片。

下面方法与上面类似，进行了改进。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。

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);

Ajax：

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);

};

利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。 JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。