js预加载图片方法汇总


Posted in Javascript onJune 15, 2015

本文实例汇总了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程序设计有所帮助。

Javascript 相关文章推荐
js 多浏览器分别判断代码
Apr 01 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JS清除选择内容的方法
Jan 29 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 #Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 #Javascript
jQuery实现自动调整字体大小的方法
Jun 15 #Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 #Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 #Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 #Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 #Javascript
You might like
PHP防注入安全代码
2008/04/09 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
监控 url fragment变化的js代码
2010/04/19 Javascript
js下通过getList函数实现分页效果的代码
2010/09/17 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
Angular 容器部署的方法
2018/04/17 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python执行外部程序的常用方法小结
2015/03/21 Python
Python学习教程之常用的内置函数大全
2017/07/14 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
司机的工作范围及职责
2013/11/13 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
物业总经理岗位职责
2014/02/28 职场文书
小学见习报告
2014/10/31 职场文书
2015年副班长工作总结
2015/05/15 职场文书
观后感格式
2015/06/19 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Python竟然能剪辑视频
2021/05/25 Python
Python函数对象与闭包函数
2022/04/13 Python