多种js图片预加载实现方式分享


Posted in Javascript onFebruary 19, 2016

图片预加载有大体有几种方式

 1.html标签或css加载图片

显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载(使用window.onload等)。

 2.纯js实现预加载

空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为

function preloadimages(arr){  
  var newimages=[], loadedimages=0
  var postaction=function(){} //此处增加了一个postaction函数
  var arr=(typeof arr!="object")? [arr] : arr
  function imageloadpost(){
    loadedimages++
    if (loadedimages==arr.length){
      postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
    }
  }
  for (var i=0; i<arr.length; i++){
    newimages[i]=new Image()
    newimages[i].src=arr[i]
    newimages[i].onload=function(){
      imageloadpost()
    }
    newimages[i].onerror=function(){
      imageloadpost()
    }
  }
  return { //此处返回一个空白对象的done方法
    done:function(f){
      postaction=f || postaction
    }
  }
}

原理就是循环创建Image对象,并设置对象的src为指定图片,然后监听图片加载完成onload = function(){imageloadpost()},当图片加载完成后就会执行到imageloadpost。原来IE6还有一个问题:如果预加载的图片已经在内存中则不会再次出发img.onload事件。但是IE7+都没有问题了。其他浏览器也没有问题,所以上面这种img.onload监听事件已经没有兼容问题了。

 3.Ajax实现预加载

ajax请求是任何数据都可以请求的,图片也不例外。先看一下js/css预加载

// 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('');

而图片的ajax预加载实际和纯js预加载图片一样

new Image().src = "http://domain.tld/preload.png";

只不过这里的解释成了ajax加载,可以理解new Image都是ajax get请求。

以上就是本文的全部内容,希望对大家理解js图片预加载有所帮助。

Javascript 相关文章推荐
使用JS读秒使用示例
Sep 21 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
ng-alain的sf如何自定义部件的流程
Jun 12 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 #Javascript
ECharts仪表盘实例代码(附源码下载)
Feb 18 #Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 #Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 #Javascript
Js实现简单的小球运动特效
Feb 18 #Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
js实现简单的省市县三级联动效果实例
Feb 18 #Javascript
You might like
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
javascript实现的listview效果
2007/04/28 Javascript
最新28个很棒的jQuery 教程
2011/05/28 Javascript
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
Python转码问题的解决方法
2008/10/07 Python
python 网络爬虫初级实现代码
2016/02/27 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
深入理解Python3中的http.client模块
2017/03/29 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
人民调解员培训方案
2014/06/05 职场文书
学校节能减排方案
2014/06/13 职场文书
汽车维修求职信
2014/06/15 职场文书
个人委托书怎么写
2014/09/17 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android