html+js實現圖片預加載,lightbox底層原理。

時間 2019-12-01

標籤 html+js html 實現圖片加載 lightbox 底層原理欄目 HTML 简体版

原文原文鏈接

在前端設計時，爲了讓某縣頁面的圖片即便緩存到瀏覽器中，通常使用預加載技術，但更爲確切的應該稱爲異步加載，由於對線程不會形成阻塞。javascript

圖片是網站開發部分中的靜態資源，當瀏覽器網絡請求到圖片時會首先緩存，而後根據url hash值載入到<img>中php

核心代碼html

<script type="text/javascript">
		
function loadImage(id,src,callback)
{

var imgloader= new window.Image();
	//當圖片成功加載到瀏覽器緩存
imgloader.onload =function(evt)  
{
    if(typeof(imgloader.readyState)=='undefined')
    {
       imgloader.readyState = 'undefined';
    }
    		//在IE8以及如下版本中須要判斷readyState而不是complete
    if ((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete) 
    { 
     callback({'msg':'ok','src':src,'id':id});
    }else{
      imgloader.onreadystatechange(evt);
    }
};
//當加載出錯或者圖片不存在
imgloader.onerror = function(evt)
{
  callback({'msg':'error','id':id});
}
//當加載狀態改變                       
imgloader.onreadystatechange = function(e)
{ 
    //此方法只有IE8以及一下版本會調用		
} 

imgloader.src=src;
   
}
</script>

深情的測試一下吧。前端

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>異步（預加載）加載圖片</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1.0" />
</head>
<body>
		
 <img src="loading.gif" id="display_images">
<script type="text/javascript">
		
function loadImage(id,src,callback)
{
   var imgloader= new window.Image();
	//當圖片成功加載到瀏覽器緩存
  imgloader.onload =function(evt)  
  {
    if(typeof(imgloader.readyState)=='undefined')
     {
	 imgloader.readyState = 'undefined';
     }
	//在IE8以及如下版本中須要判斷readyState而不是complete
   if ((imgloader.readyState=='complete'||imgloader.readyState=="loaded")||imgloader.complete)   
   { 
      //console.log('width='+imgloader.width+',height='+imageloader.height);//讀取原始圖片大小
      callback({'msg':'ok','src':src,'id':id});
   }else{
     imgloader.onreadystatechange(evt);
   }
};

imgloader.onerror = function(evt)
{
   callback({'msg':'error','id':id});
};
                       
 imgloader.onreadystatechange = function(e)
 { 
 //此方法只有IE8以及一下版本會調用		
 };
 imgloader.src=src;
}

var loadResult = function(data)
{
   data =   data ||{} ;
   if(typeof(data.msg)!='undefined')
   {
	if(data.msg=='ok')
	{
             //這裏使用了id獲取元素，有點死板，建議讀者自行擴展爲css 選擇符
             document.getElementById(''+data.id).src=data.src;
           
        }else{
	    //這裏圖片加載失敗，咱們能夠顯示其餘圖片，防止大紅叉
	    document.getElementById(''+data.id).src='unload.png';
	}
   }
}

var surl = 'http://web.2008php.com/2014_Website_appreciate/2014-10-31/20141031133134.jpg'; 

loadImage('display_images',surl,loadResult);
</script>
	
</body>
</html>

注意：這種用法過於簡單，沒有發揮出性能，請讀者自行改造後，預加載20張1024*780圖片，而後自動播放。若是是預加載的，播放時看不見卡頓或顯示不徹底的現象。java

--------------------------------------------------------------------------------web

目前，不少主流的圖片展現庫如 lightbox.js,facybox.js等底層就是依據這種原理實現的，有興趣的讀者能夠使用一下這些第三方框架。chrome

try doing it.瀏覽器