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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
小程序转发探索示例
Feb 19 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
长波有什么东西
2021/03/01 无线电
我的论坛源代码(七)
2006/10/09 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
检测png图片是否完整的php代码
2010/09/06 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
layui实现三级导航菜单
2019/07/26 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
Python Deque 模块使用详解
2014/07/04 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
python获取栅格点和面值的实现
2020/03/10 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
好人好事事迹材料
2014/02/12 职场文书
环卫工作汇报材料
2014/10/28 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS