欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于javascript實現圖片預加載

 更新時間:2016年01月05日 15:52:56   作者:小火柴的藍色理想  
這篇文章主要介紹了javascript圖片預加載的方法,實例分析了javascript實現圖片預加載的思路,具有一定參考借鑒價值,需要的朋友可以參考下

一、定義
預加載圖片是提升用戶體驗的一個好辦法,提前加載用戶所需的圖片,保證圖片快速、無縫發(fā)布,使用戶在瀏覽器網站時獲得更好用戶體驗。常用于圖片畫廊等應用中。
[注意]若使用即時加載,加載的圖片與頁面的其他內容一起加載會增加頁面的整體加載時間,所以使用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')創(chuàng)建<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事件可以確切地知道圖片是否被真正加載,并可能在后續(xù)執(zhí)行一系列對圖片的操作功能,如獲取當前圖片的實際寬高及索引等
[注意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');
  //在本機環(huán)境下,IE8-瀏覽器下oImg的onload事件放在src后面將無法載入圖片
  oImg.src = url;
  oImg.onload = function(){
    document.body.appendChild(oImg);
    oImg.onload = null;
    oImg = null;
  }      
}
</script>  

[注意2]Image對象的onload屬性引用了一個匿名函數對象,而匿名函數通過其作用域引用Image對象,這種循環(huán)引用會有IE6中導致內存泄漏,因此,應該解除循環(huán)引用。
【遞歸寫法】

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

【循環(huán)寫法】

<!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程序設計有所幫助。

相關文章

  • js播放wav文件(源碼)

    js播放wav文件(源碼)

    如何用JS播放wav文件,理論上用js在網頁里嵌入一個window播放器的插件,可以播放的。,不過通用性不是很好,IE下可以用,感興趣的朋友可以參考下哈本文
    2013-04-04
  • JavaScript 注冊事件代碼

    JavaScript 注冊事件代碼

    最基本的寫法 ,然后實現Js和HTML的分離,然后又實現對同一個元素注冊多個事件,期間,我們發(fā)現注冊事件的兼容性問題。最后我們對注冊事件的方法進行封裝,方便以后使用。
    2011-01-01
  • layui table 參數設置方法

    layui table 參數設置方法

    今天小編就為大家分享一篇layui table 參數設置方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)

    Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)

    JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式.這篇文章主要介紹了Json對象和字符串互相轉換json數據拼接和JSON使用方式詳細介紹(小結)的相關資料,需要的朋友可以參考下
    2016-10-10
  • javaScript事件學習小結(四)event的公共成員(屬性和方法)

    javaScript事件學習小結(四)event的公共成員(屬性和方法)

    這篇文章主要介紹了javaScript事件學習小結(四)event的公共成員(屬性和方法)的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • JavaScript生成UUID的五種方法詳解

    JavaScript生成UUID的五種方法詳解

    UUID是一種由算法生成的二進制長度為128位的數字標識符,格式為“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”。本文總結了五個JS生成UUID的方法,感興趣的可以了解一下
    2022-06-06
  • bootstrap-table.js擴展分頁工具欄(增加跳轉到xx頁)功能

    bootstrap-table.js擴展分頁工具欄(增加跳轉到xx頁)功能

    這篇文章主要介紹了bootstrap-table.js擴展分頁工具欄,增加跳轉到xx頁功能,由于小編的水平停留在dom級,此次擴展只支持頁面上的表格,如果大家有好的建議歡迎提出
    2017-12-12
  • js判斷數組中是否包含某個值的4種方法總結

    js判斷數組中是否包含某個值的4種方法總結

    這篇文章主要給大家總結介紹了關于js判斷數組中是否包含某個值的4種方法,數組是我們編程中經常使用的的數據結構之一,在處理數組時我們經常需要在數組中查找特定的值,JavaScript 包含一些內置方法來檢查數組是否有特定的值或對象,需要的朋友可以參考下
    2023-11-11
  • 利用原生的JavaScript實現簡單拼圖游戲

    利用原生的JavaScript實現簡單拼圖游戲

    拼圖游戲是我們大家都玩過的一款小游戲,下面這篇文章主要給大家介紹了關于如何利用原生的JavaScript實現簡單拼圖游戲的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2018-11-11
  • JavaScript之通過年月獲取月份的天數、日期格式化、時間、補零、Date、toLocaleString、Intl、DateTimeFormat、format(問題總結)

    JavaScript之通過年月獲取月份的天數、日期格式化、時間、補零、Date、toLocaleString、Intl、

    這篇文章主要介紹了JavaScript之通過年月獲取月份的天數、日期格式化、時間、補零、Date、toLocaleString、Intl、DateTimeFormat、format的相關知識,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2024-03-03

最新評論