首页
所有分类
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 相关文章推荐
javascript 避免闭包引发的问题
Mar 17 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Vue组件开发初探
Feb 14 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 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
亚洲购物网站(6) 乌克兰购物网站(27) 罗马尼亚购物网站(10) 越南购物网站(9) 马耳他购物网站(1) 巴基斯坦购物网站(2) 希腊购物网站(6) 缅甸购物网站(1) 摩纳哥购物网站(1) 北美洲购物网站(1)
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
调频问题解答
2021/03/01 无线电
PHP中for循环语句的几种变型
2006/11/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
Prototype Array对象 学习
2009/07/19 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
python 读取.nii格式图像实例
2020/07/01 Python
pandas针对excel处理的实现
2021/01/15 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
Under Armour澳大利亚官网：美国知名的高端功能性运动品牌
2018/02/22 全球购物
学生出入校管理制度
2014/01/16 职场文书
测量工程专业求职信
2014/02/24 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
2014年少先队工作总结
2014/12/03 职场文书
烈士陵园观后感
2015/06/08 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis