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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
JavaScript 学习 - 提高篇
Feb 02 Javascript
Javascript面向对象编程
Mar 18 Javascript
移动手机APP手指滑动切换图片特效附源码下载
Nov 30 Javascript
原生js实现移动端瀑布流式代码示例
Dec 18 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
Vue中keep-alive组件作用详解
Feb 04 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获得文件扩展名三法
2006/11/25 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
js变量值传到php过程详解 将php解析成数据
2019/06/26 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
python通过urllib2爬网页上种子下载示例
2014/02/24 Python
python实现单向链表详解
2018/02/08 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
金融管理专业毕业生求职信
2014/03/12 职场文书
小学校长汇报材料
2014/08/20 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
廉政教育的心得体会
2014/09/01 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
中国合伙人观后感
2015/06/02 职场文书
可怜妈妈观后感
2015/06/09 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL