1. 云栖社区>
  2. >
  3. 正文

js预加载图片方法汇总_javascript技巧

作者:用户 来源:互联网 时间:2016-06-15 10:45:13

js图片预加载

js预加载图片方法汇总_javascript技巧 - 摘要: 本文讲的是js预加载图片方法汇总_javascript技巧, 本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下: 1. 纯CSS: #preload-01 { background: url(yun_qi_img/image-01.png) no-repeat -9999px

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

1. 纯CSS:

css;">
#preload-01 {
background: url(yun_qi_img/image-01.png) no-repeat -9999px -9999px;
}
#preload-02 {
background: url(yun_qi_img/image-02.png) no-repeat -9999px -9999px;
}
#preload-03 {
background: url(yun_qi_img/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(yun_qi_img/image-01.png) no-repeat -9999px -9999px";
    document.getElementById("preload-02").style.background = "url(yun_qi_img/image-02.png) no-repeat -9999px -9999px";
    document.getElementById("preload-03").style.background = "url(yun_qi_img/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(
        "yun_qi_img/image-001.jpg",
        "yun_qi_img/image-002.jpg",
        "yun_qi_img/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 = "yun_qi_img/image-001.gif";
        img2.src = "yun_qi_img/image-002.gif";
        img3.src = "yun_qi_img/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 = "yun_qi_img/image-001.gif";
    img2.src = "yun_qi_img/image-002.gif";
    img3.src = "yun_qi_img/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 = "yun_qi_img/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 = "yun_qi_img/preload.png";
  }, 1000);
};

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

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js , 图片 预加载 javascript知识点汇总、javascript 加载、javascript技巧、javascript动态加载js、javascript加载顺序,以便于您获取更多的相关知识。