基于javascript实现图片预加载

前端技术 2023/09/08 JavaScript

一、定义
预加载图片是提升用户体验的一个好办法，提前加载用户所需的图片，保证图片快速、无缝发布，使用户在浏览器网站时获得更好用户体验。常用于图片画廊等应用中。
[注意]若使用即时加载，加载的图片与页面的其他内容一起加载会增加页面的整体加载时间，所以使用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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/22767

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案