首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于javascript实现图片预加载

Posted in Javascript onJanuary 05, 2016

一、定义
预加载图片是提升用户体验的一个好办法，提前加载用户所需的图片，保证图片快速、无缝发布，使用户在浏览器网站时获得更好用户体验。常用于图片画廊等应用中。
[注意]若使用即时加载，加载的图片与页面的其他内容一起加载会增加页面的整体加载时间，所以使用window.onload比较合适。
二、两种思路
1、使用背景图像
使用页面无用元素的背景图片预加载

<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.list li{
  height: 0;
  width: 0;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<ul class="list">
  <li id="preload1"></li>
  <li id="preload2"></li>
  <li id="preload3"></li>
  <li id="preload4"></li>
</ul>
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
function preLoadImg(){
  preload1.style.background = "url('img/img1.gif')";
  preload2.style.background = "url('img/img2.gif')";
  preload3.style.background = "url('img/img3.gif')";
  preload4.style.background = "url('img/img4.gif')";
}
window.onload = function(){
  preLoadImg();  
}
</script>
</body>

2、使用Image()
通过new Image()或document.createElement('img')创建<img>标签，然后通过<img>src赋值语句来加载图片

<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var aImages = [];
function preLoadImg(array){
  for(var i = 0, len = preLoadImg.arguments[0].length; i < len; i++){
    aImages[i] = new Image();
    aImages[i].src = preLoadImg.arguments[0][i];
  }
}
window.onload = function(){
  preLoadImg(array);  
}
</script>
</body>

三、onload事件
利用图像的onload事件可以确切地知道图片是否被真正加载，并可能在后续执行一系列对图片的操作功能，如获取当前图片的实际宽高及索引等
[注意1]图片的src赋值语句必须放在图片的onload事件后面。否则可能出现图片已经加载完毕、但事件绑定尚未完成的情况

<button>载入图片</button>
<script>
var oBtn = document.getElementsByTagName('button')[0];
oBtn.onclick = function(){
  preLoadImg('img/test.png');
}
function preLoadImg(url){
  var oImg = document.createElement('img');
  //在本机环境下，IE8-浏览器下oImg的onload事件放在src后面将无法载入图片
  oImg.src = url;
  oImg.onload = function(){
    document.body.appendChild(oImg);
    oImg.onload = null;
    oImg = null;
  }      
}
</script>

[注意2]Image对象的onload属性引用了一个匿名函数对象，而匿名函数通过其作用域引用Image对象，这种循环引用会有IE6中导致内存泄漏，因此，应该解除循环引用。
【递归写法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var oImg = document.createElement('img');
var iDown = 0;  
preLoadImg();
function preLoadImg(){
  oImg.onload = function(){
    iDown++;
    alert('第' + iDown + '张图片的宽:' + this.width + ' 高:' + this.height);
    if(iDown < array.length){
      preLoadImg();
    }else{
      oImg.onload = null;
      oImg = null;
    }
  }
  oImg.src = array[iDown];            
}
</script>
</body>
</html>

【考虑onerror的更完善写法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
var iDown = 0;
var oImage = new Image();
function preLoadImg(arr){
  function loadImgTest(arr){
    iDown++;
    if(iDown < arr.length){
      preLoadImg(arr);
    }else{
      alert('ok');
      oImg.onload = null;
      oImg = null;      
    }
  }
  oImage.onload = function(){
    loadImgTest(arr);
  };
  oImage.onerror = function(){
    loadImgTest(arr);
  };  
  oImage.src = arr[iDown];
}
preLoadImg(array);
</script>
</body>
</html>

【循环写法】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="img/test.png" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var array = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"]
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = array[iNow];
}
function preLoadImg(arr,callback){
  var aImages = [];
  var iDown = 0;
  for(var i = 0; i < arr.length; i++){
    aImages[i] = new Image();
    aImages[i].onload = function(){
      loadImgTest(arr,callback);
    };
    aImages[i].onerror = function(){
      loadImgTest(arr,callback);
    };    
    aImages[i].src = arr[iDown];
  }
  function loadImgTest(arr,callback){
    iDown++;
    if(iDown == arr.length){
      alert('ok');
      callback && callback.call(aImages);    
    }
  }  
}
preLoadImg(array,function(){
  console.log(this[0].width);
});
</script>
</body>
</html>
应用：预加载模糊变清晰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
  margin: 0;
}
img{
  width: 500px;
  height: 500px;
}
</style>
</head>
<body>
<button>载入图片</button>
<img src="#" alt="测试">
<script>
var oBtn = document.getElementsByTagName('button')[0];
var oImg0 = document.images[0];
var arrayB = ["img/img1.gif","img/img2.gif","img/img3.gif","img/img4.gif"];
var arrayL = ["img/img1.jpg","img/img2.jpg","img/img3.jpg","img/img4.jpg"];
var iNow = -1;
oBtn.onclick = function(){
  iNow++;
  iNow = iNow%4;
  oImg0.src = arrayL[iNow];
  aftLoadImg(arrayB,oImg0);
}

var aImages = [];
window.onload = function(){
  preLoadImg(arrayL);  
}
function preLoadImg(arr){
  for(var i = 0, len = arr.length; i < len; i++){
    aImages[i] = new Image();
    aImages[i].src = arr[i];
  }
}
function aftLoadImg(arr,obj){
  var oImg = new Image();
  oImg.onload = function(){
    obj.src = arr[iNow];
  }
  oImg.src = arr[iNow];
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

基于javascript实现图片预加载

- Author -

小火柴的蓝色理想

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
node.js中的Socket.IO使用实例
Nov 04 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
Vue组件开发初探
Feb 14 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
vue实现拖拽效果
Dec 23 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行）
Jan 05 #Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 #Javascript
javascript简单比较日期大小的方法
Jan 05 #Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 #Javascript
简述jQuery ajax的执行顺序
Jan 05 #Javascript
JavaScript类型系统之正则表达式
Jan 05 #Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 #Javascript
procedure(1) 内置函数(1) Tablespace(1) 自定义函数(1) 分布式锁(3) pytz(1) harbor(1) commit(1) GoFrame(3) Navicat(1)
You might like
PHP中的cookie
2006/11/26 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
FCK调用方法..
2006/12/21 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jquery获得当前html页面源码的方法
2015/07/14 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
JavaScript驾驭网页－DOM
2016/03/24 Javascript
使用递归遍历对象获得value值的实现方法
2016/06/14 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JS中split()用法（将字符串按指定符号分割成数组）
2016/10/24 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[01:09]DOTA2次级职业联赛 - 99战队宣传片
2014/12/01 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python分割和拼接字符串
2013/11/01 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Jupyter加载文件的实现方法
2020/04/14 Python
地球鞋加拿大官网：Earth Shoes Canada
2020/11/17 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
岗位职责风险点
2014/03/12 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
收费员岗位职责
2015/02/14 职场文书
信息技术教研组工作总结
2015/08/13 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Html5新增了哪些功能
2021/04/16 HTML / CSS
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技