js预加载图片方法汇总

2019-11-20 12:15:14

字体：大中小

来源：转载

供稿：网友

本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下：

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

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：jquery插件unobtrusive实现片段式加载

下一篇：jquery实现兼容IE8的异步上传文件