多种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 相关文章推荐
jQuery的学习步骤
Feb 23 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
Vuex实现数据共享的方法
Dec 20 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
js点击button按钮跳转到另一个新页面
2014/10/10 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
python中hashlib模块用法示例
2017/10/30 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python模拟实现斗地主发牌
2020/01/07 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
详解Python IO编程
2020/07/24 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
关于旷工的检讨书
2014/02/02 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
拆迁委托协议书
2014/09/15 职场文书
在校学生证明格式
2015/06/24 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
MySQL 使用索引扫描进行排序
2021/06/20 MySQL