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 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
DOM 事件流详解
Jan 20 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
JavaScript Array对象详解
Mar 01 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php下载excel无法打开的解决方法
2013/12/24 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
python实现rest请求api示例
2014/04/22 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
查看django版本的方法分享
2018/05/14 Python
python生成九宫格图片
2018/11/19 Python
python文本数据处理学习笔记详解
2019/06/17 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
如何用Django处理gzip数据流
2021/01/29 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
民间借贷协议书范本
2014/10/01 职场文书
西安事变观后感
2015/06/12 职场文书
运动会通讯稿600字
2015/07/20 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python