多种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 相关文章推荐
Javascript 生成指定范围数值随机数
Jan 09 Javascript
JavaScript 字符编码规则
May 04 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
JQuery加载图片自适应固定大小的DIV
Sep 12 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
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插入排序法实现数组排序实例
2015/02/16 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
PHP函数超时处理方法
2016/02/14 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
JavaScript模拟重力状态下抛物运动的方法
2015/03/03 Javascript
移动端js图片查看器
2016/11/17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python如何从文件读取数据及解析
2019/09/19 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python各种扩展名区别点整理
2020/02/27 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
大学校园活动策划书
2014/02/04 职场文书
房地产项目策划书
2014/02/05 职场文书
三八妇女节活动总结
2014/05/04 职场文书
大学生赌博检讨书
2014/09/22 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
Android自定义scrollview实现回弹效果
2022/04/01 Java/Android