js圖片載入的兩種效果實例程式碼-js教程-PHP中文網

首頁

web前端

js教程

js圖片載入的兩種效果實例程式碼

零下一度

May 15, 2017 am 09:47 AM

本篇文章主要介紹了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 lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList1.jg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList2.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList3.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList4.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList5.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList6.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList7.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList8.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList9.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
    <img  class="lazy lazy"  src="/static/imghwm/default1.png"  data-src="pic/compressed/picList10.jpg"    alt="js圖片載入的兩種效果實例程式碼" >
  </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 = $(&#39;img.lazy&#39;);
var loadBarMask = $(&#39;#loadBarMask&#39;);
var picList = $(&#39;.picList&#39;);

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(&#39;src&#39;);
      self.attr(&#39;src&#39;,src[index]);
      self.removeClass(&#39;lazy&#39;);

      //图片获得正确src地址之后，可以执行下面的onload操作
      self[0].onload = function(){

        //加载读条loadBar动画
        countPic();
      }

      //图片获得的src地址不正确时，执行下面的onerror操作
      self[0].onerror = function(){
        /*this.style.background = &#39;url(pic/compressed/picList18.jpg) center no-repeat&#39;;*/
        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){
    $(&#39;#loadBar&#39;).hide();
  }
}

二瀑布流載入

#主要想法：
監聽視窗滾動情況，當已經載入的圖片的最後一張快要進入視窗的時候，開始載入下面的圖片。
假設所有的圖片位址已經存在一個
資料中，每次讀取10張圖片位址，載入它們之後，插入到現有的瀑布流末尾。

如此往復，直到載入完所有圖片。

HTML和前面部分相同，只是把src寫成正常位址即可。 css完全一樣。

js部分

var lazyPic = $(&#39;img.lazy&#39;);
var loadBarMask = $(&#39;#loadBarMask&#39;);
var picList = $(&#39;.picList&#39;);

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(&#39;scroll&#39;,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

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。