js圖片載入的兩種效果實例程式碼
- 零下一度原創
- 2017-05-15 09:47:281510瀏覽
本篇文章主要介紹了js圖片載入效果實例程式碼（延遲載入+瀑布流載入），非常具有實用價值，需要的朋友可以參考下
主要做了兩種圖片加載的效果
一種是遇到頁面圖片比較多的時候，帶有讀條效果的加載提示（為了驗證正確加載，設置了1秒鐘的載入間隔時間）
另一種是根據滑桿的位置進行圖片的預先加載，在使用者不察覺的情況下，實現瀑布流的載入效果
一延遲載入
主要思路：
HTML的img標籤中，將正確的位址存在src屬性中，為所有圖片設定一個轉圈圈的loading圖片作為background
js中，依序讀取每一個img，將src中的位址替換到src中，去掉background
每成功載入一張圖片，進度條的百分比會進行對應的變化。
如果載入不成功，就提示圖片載入錯誤。
HTML結構很簡單，就是一個p.picList包裹了所有img，然後加上一個簡單的進度條p#loadBar
<body>
<p class="picList">
<img class="lazy" src="pic/compressed/picList1.jg">
<img class="lazy" src="pic/compressed/picList2.jpg">
<img class="lazy" src="pic/compressed/picList3.jpg">
<img class="lazy" src="pic/compressed/picList4.jpg">
<img class="lazy" src="pic/compressed/picList5.jpg">
<img class="lazy" src="pic/compressed/picList6.jpg">
<img class="lazy" src="pic/compressed/picList7.jpg">
<img class="lazy" src="pic/compressed/picList8.jpg">
<img class="lazy" src="pic/compressed/picList9.jpg">
<img class="lazy" src="pic/compressed/picList10.jpg">
</p>
<p id="loadBar">
<p id="loadBarMask"></p>
</p>
</body>css（使用的scss ，編譯時會自動加上各種相容前綴）
.picList{
img{
width: 100px;
height: 100px;
position: relative;
/*加载失败时显示灰底文字*/
&:after{
content: "( ⊙ o ⊙ )加载失败";
font-size: 6px;
font-family: FontAwesome;
color: rgb(100, 100, 100);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ddd;
}
}
}
.lazy{
background: url(../pic/loading.gif) center no-repeat;
border: 1px solid black;
}
#loadBar{
width: 200px;
height: 15px;
background: linear-gradient(90deg,#187103,#81b50b,#187103);
border: 10px solid white;
position: absolute;
top: 150px;
left: 50%;
margin-left: -100px;
#loadBarMask{
width: 70%;//这个数值显示没有加载成功的图片
height: 100%;
background-color: beige;
position: absolute;
right: 0;
}
}css裡面要注意的地方有兩個：
一個是把圖片載入錯誤時顯示的灰底文字放在了img的after偽類中，當圖片載入失敗，又去掉了background的gif圖片之後，就會顯示這個部分的內容及樣式。
一個是進度條的樣式。寫得很簡單，主要是一層帶有漸層的綠色和一層白色疊在一起。綠色表示已加載，白色表示未加載。顯示的時候，直接控制白色那層的寬度即可。
js部分（直接執行loadPicPerSecond()即可）
var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');
var activePic = 0;
var totalPic = lazyPic.length;
/*每秒加载一张图片*/
function loadPicPerSecond(){
lazyPic.each(function(index){
var self = $(this);
//console.log(self[0].complete);
/*img标签已经事先写在html中，所以此时的complete状态全部都是true*/
setTimeout(function(){
src[index] = self.attr('src');
self.attr('src',src[index]);
self.removeClass('lazy');
//图片获得正确src地址之后，可以执行下面的onload操作
self[0].onload = function(){
//加载读条loadBar动画
countPic();
}
//图片获得的src地址不正确时，执行下面的onerror操作
self[0].onerror = function(){
/*this.style.background = 'url(pic/compressed/picList18.jpg) center no-repeat';*/
countPic();
}
},1000*index);
})
}
/*根据onload的执行情况来计算当前的图片加载进度.每onload一次，activePic就增加1*/
function countPic(){
activePic++;
var leftPic = totalPic - activePic;
var percentPic = Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比，和loadBarMask的宽度占比配合
console.log("已加载"+(100-percentPic)+"%");
loadBarMask.css("width",percentPic+"%");
if(percentPic==0){
$('#loadBar').hide();
}
}二瀑布流載入
- #主要想法：
- 監聽視窗滾動情況，當已經載入的圖片的最後一張快要進入視窗的時候，開始載入下面的圖片。 假設所有的圖片位址已經存在一個 json
- 資料中，每次讀取10張圖片位址，載入它們之後，插入到現有的瀑布流末尾。
var lazyPic = $('img.lazy');
var loadBarMask = $('#loadBarMask');
var picList = $('.picList');
var scrollTop,
clientHeight,
scrollHeight;
var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片
var src = [];
var activePic = 0;
var totalPic = lazyPic.length;
//待加载的图片数据
var dirtSrc = "pic/compressed/picList";
var picData = {imgSrc:[
dirtSrc + "20.jpg",
dirtSrc + "21.jpg",
dirtSrc + "22.jpg",
dirtSrc + "23.jpg",
dirtSrc + "24.jpg",
dirtSrc + "25.jpg",
dirtSrc + "26.jpg",
dirtSrc + "27.jpg",
dirtSrc + "28.jpg",
dirtSrc + "29.jpg",
dirtSrc + "30.jpg",
dirtSrc + "31.jpg",
dirtSrc + "32.jpg",
dirtSrc + "33.jpg",
dirtSrc + "34.jpg",
dirtSrc + "35.jpg",
dirtSrc + "36.jpg",
dirtSrc + "37.jpg",
dirtSrc + "38.jpg",
dirtSrc + "39.jpg",
dirtSrc + "40.jpg",
dirtSrc + "41.jpg",
dirtSrc + "42.jpg",
dirtSrc + "43.jpg",
dirtSrc + "44.jpg",
dirtSrc + "45.jpg",
dirtSrc + "46.jpg",
dirtSrc + "47.jpg",
dirtSrc + "48.jpg",
dirtSrc + "49.jpg",
]};
//加载次数计数器
var scrollIndex = 0;
$(function(){
/*监听窗口滚动情况*/
$(window).on('scroll',function(){
scrollTop = $(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
clientHeight = $(window).height();
scrollHeight = picList.last().height();//picList.last()[0].clientHeight
/*目标与窗口的距离达到阈值时开始加载*/
if(scrollHeight-clientHeight-scrollTop < threshold){
scrollPic(10);
}
})
})
/*根据滚动程度加载图片，每次加载perAmount张*/
function scrollPic(perAmount = 10){
var totalAmount = perAmount * (scrollIndex+1);
//考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值
if(totalAmount>picData.imgSrc.length){
totalAmount = picData.imgSrc.length;
}
for(scrollIndex;scrollIndex<totalAmount;scrollIndex++){
var oimg = new Image();
oimg.src = picData.imgSrc[scrollIndex];
picList.append(oimg);
}
}比較捉急的就是scrollTop、height那幾個值的取值物件，總是記不清楚，所以按照js和jquery
都寫上了，以後可以直接用。將數值關係搞定之後，只要滿足條件就觸發載入即可。
【相關推薦】1. 特別推薦
：「php程式設計師工具箱」V0.1版本下載2. 免費js線上影片教學
3. php.cn獨孤九賤（3）－JavaScript影片教學
##########以上是js圖片載入的兩種效果實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn