Home > Article > Web Front-end > Image preloading based on javascript_javascript skills

Image preloading based on javascript_javascript skills

WBOYOriginal: 2016-05-16 15:21:331768browse

1. Definition
Preloading images is a good way to improve the user experience. It loads the images required by the user in advance to ensure that the images are published quickly and seamlessly, so that users can get a better user experience when browsing the website. Commonly used in applications such as photo galleries.
[Note]If instant loading is used, loading the loaded images together with other content of the page will increase the overall loading time of the page, so it is more appropriate to use window.onload.
2. Two ideas
1. Use background images
Use background image preloading for useless page elements

<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. Use Image()
Create the a1f02c36ba31691bcfe87b2722de723b tag through new Image() or document.createElement('img'), and then load the image through the a1f02c36ba31691bcfe87b2722de723bsrc assignment statement

<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>

3. onload event
Using the onload event of the image, you can know exactly whether the image is actually loaded, and may subsequently perform a series of operations on the image, such as obtaining the actual width, height and index of the current image, etc.
[Note 1] The src assignment statement of the image must be placed after the onload event of the image. Otherwise, it may happen that the image has been loaded but the event binding has not been completed

<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>

[Note 2] The onload attribute of the Image object refers to an anonymous function object, and the anonymous function refers to the Image object through its scope. This circular reference will cause a memory leak in IE6. Therefore, the circular reference should be released.
【Recursive writing】

<!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>

[Consider a more complete way of writing 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>

【Loop writing】

<!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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js method to determine which browser to open the current page_javascript skillsNext article：js method to determine which browser to open the current page_javascript skills

See more

Image preloading based on javascript_javascript skills

Related articles