基于javascript實現(xiàn)圖片預加載
更新時間：2016年01月05日 15:52:56 作者：小火柴的藍色理想
這篇文章主要介紹了javascript圖片預加載的方法,實例分析了javascript實現(xiàn)圖片預加載的思路,具有一定參考借鑒價值,需要的朋友可以參考下
一、定義
預加載圖片是提升用戶體驗的一個好辦法，提前加載用戶所需的圖片，保證圖片快速、無縫發(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事件后面。否則可能出現(xiàn)圖片已經加載完畢、但事件綁定尚未完成的情況
<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屬性引用了一個匿名函數(shù)對象，而匿名函數(shù)通過其作用域引用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在網頁里嵌入一個window播放器的插件,可以播放的。,不過通用性不是很好,IE下可以用，感興趣的朋友可以參考下哈本文2013-04-04
最基本的寫法 ，然后實現(xiàn)Js和HTML的分離，然后又實現(xiàn)對同一個元素注冊多個事件，期間，我們發(fā)現(xiàn)注冊事件的兼容性問題。最后我們對注冊事件的方法進行封裝，方便以后使用。2011-01-01
今天小編就為大家分享一篇layui table 參數(shù)設置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Json對象和字符串互相轉換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結)
JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式.這篇文章主要介紹了Json對象和字符串互相轉換json數(shù)據(jù)拼接和JSON使用方式詳細介紹(小結)的相關資料,需要的朋友可以參考下2016-10-10
javaScript事件學習小結（四）event的公共成員（屬性和方法）
這篇文章主要介紹了javaScript事件學習小結（四）event的公共成員（屬性和方法）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
UUID是一種由算法生成的二進制長度為128位的數(shù)字標識符，格式為“xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”。本文總結了五個JS生成UUID的方法，感興趣的可以了解一下2022-06-06
bootstrap-table.js擴展分頁工具欄(增加跳轉到xx頁)功能
這篇文章主要介紹了bootstrap-table.js擴展分頁工具欄，增加跳轉到xx頁功能，由于小編的水平停留在dom級，此次擴展只支持頁面上的表格，如果大家有好的建議歡迎提出2017-12-12
這篇文章主要給大家總結介紹了關于js判斷數(shù)組中是否包含某個值的4種方法,數(shù)組是我們編程中經常使用的的數(shù)據(jù)結構之一,在處理數(shù)組時我們經常需要在數(shù)組中查找特定的值,JavaScript 包含一些內置方法來檢查數(shù)組是否有特定的值或對象,需要的朋友可以參考下2023-11-11
拼圖游戲是我們大家都玩過的一款小游戲，下面這篇文章主要給大家介紹了關于如何利用原生的JavaScript實現(xiàn)簡單拼圖游戲的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-11-11
JavaScript之通過年月獲取月份的天數(shù)、日期格式化、時間、補零、Date、toLocaleString、Intl、
這篇文章主要介紹了JavaScript之通過年月獲取月份的天數(shù)、日期格式化、時間、補零、Date、toLocaleString、Intl、DateTimeFormat、format的相關知識,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03