検索

ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルに基づく画像のプリロード

javascript_javascript スキルに基づく画像のプリロード

WBOY
WBOYオリジナル
2016-05-16 15:21:331838ブラウズ

1. 定義
 画像のプリロードは、ユーザーが必要とする画像を事前にロードして、画像が迅速かつシームレスに公開されるようにすることで、ユーザーが Web サイトを閲覧する際のユーザー エクスペリエンスを向上させることができます。フォトギャラリーなどのアプリケーションでよく使用されます。
[注意]インスタントロードを使用する場合、ロードされた画像をページの他のコンテンツと一緒にロードすると、ページ全体のロード時間が長くなるため、ウィンドウを使用する方が適切です。 .onload。
2. 2 つのアイデア
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') を通じて a1f02c36ba31691bcfe87b2722de723b タグを作成し、a1f02c36ba31691bcfe87b2722de723bsrc 代入ステートメント
を通じて画像をロードします。 

<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 イベントを使用すると、画像が実際にロードされているかどうかを正確に知ることができ、その後、現在の画像の実際の幅、高さ、インデックスの取得など、画像に対して一連の操作を実行できます。 .
[注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 プログラミング設計に役立つことを願っています。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：現在の page_javascript スキルを開くブラウザを決定する js メソッド次の記事：現在の page_javascript スキルを開くブラウザを決定する js メソッド

関連記事

続きを見る