Js pre-loaded image method summary, js load Summary

Js pre-loaded image method summary, js load Summary

This example summarizes the js pre-loading image method. Share it with you for your reference. The specific analysis is as follows:

1. pure 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 optimization:

// 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 Code 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 Code 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 code optimization 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 code 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 Code 2:

window.onload = function() {  setTimeout(function() {    // reference to 
I hope this article will help you design javascript programs.