jquery 圖片預加載
阿新 • • 發佈：2018-08-12
方法 end center position load des ring mgo tle
/圖片無序預加載
(function($){
function Preload(imgs,fns){
this.imgs=(typeof imgs==="string")?[imgs]:imgs;
this.fns=$.extend({},Preload.fns,fns);//把fns 覆蓋到Preload上 然後添加到{}返回
if(this.fns.loadMethod=="unorderload"){//是無序 還是有序
this._unorderload();
}
else{
this._orderload();
}
}
Preload.fns
使用方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>有序預加載</title>
<style>
*{margin: 0; padding: 0;}
img{
width:100%;
vertical-align:top;
}
.imgBox{
width:500px;
margin:100px auto;
}
#prevImg, #nextImg{
width:60px;
font-size:15px;
height:30px;
line-height:30px;
text-align:center;
background: #686868;
position:absolute;
color:#000;
text-decoration:none;
margin-top:-50px;
}
#prevImg{
left:40%;
}
#nextImg{
left:55%;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/unorderload.js"></script>
<script>
$(function(){
var imgs=["img/0.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
var len=imgs.length;
var index=0;
$.preload(imgs,{});
$("#control-img-btn").on("click","a",function(){
if($(this).hasClass("prevImg")){
index=Math.max(0,--index); //上一張
}
else{
index=Math.min(len-1,++index);//下一張
}
$("#imgBox img").attr("src",imgs[index]);
});
});
</script>
</head>
<body>
<div class="imgBox" id="imgBox">
<img />
</div>
<p id="control-img-btn">
<a href="javascript:;" id="prevImg" class="prevImg">上一頁</a>
<a href="javascript:;" id="nextImg" class="nextImg">下一頁</a>
</p>
</body>
</html>
jquery 圖片預加載