頁面滾動圖片等元素動態載入外掛程式jquery.scrollLoading.js

標籤：作者   func   沒有   blank   style   詳細   表示   一點   檔案   

 　　如果一個網頁很長，那麼該頁面的載入時間也會相應的較長。而這裡給大家介紹的這個jQuery外掛程式scrollLoading的作用則是，對頁面元素進行動態載入，通俗的說就是滾到哪就載入到哪，螢幕以下看不見的就不用載入了。這樣還可以在一定程度上節省伺服器資源。該外掛程式作者的網頁將該外掛程式的功能和使用方法描述的非常詳細，這裡把最一般最普遍的使用方式給大家展現一下。

    外掛程式http://www.zhangxinxu.com/

    首先我們需要載入jQuery庫和本外掛程式js檔案。

    （jquery.scrollLoading.js檔案下載見頁面下方附件）

1 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>2 <script type="text/javascript" src="./js/jquery.scrollLoading.js"></script>

 

     接下來我們對自己想要運用該效果的圖片進行一下簡單的形式處理。

1 <img class="scrollLoading" data-url="真實的圖片地址" src="臨時圖片地址" width="120" height="90"/>

　　看到如上形式，給大家簡單說明一下。該外掛程式的原理是首先給圖片的src賦一個臨時圖片地址，這個圖片可以是一個1像素的透明圖片（建議設定寬和高），這樣，所有需要運用動態載入效果的圖片只有在滾動到相應的位置時，該圖片的src才會替換成真實的圖片地址。注意，我們還要給這些圖片添加統一的class，如上是”scrollLoading“以便我們將要對其進行選擇並實現我們需要的效果。從而，瀏覽器沒有到達的地區中的圖片都只是載入同一個1像素的圖片而已。如果要給正在載入的圖片一個載入的動態效果，我們可以給這個1像素的透明圖片添加一個GIF動態載入的背景圖片，那樣會給人更好的體驗。 好了，上面已經載入了必要的兩個JS檔案，以及我們已經對需要動態載入的圖片進行了處理。此外掛程式的方法名就是scrollLoading，所以，直接：封裝器.scrollLoading();就可以實現滾動式載入效果了。如下：

1 <script type="text/javascript">2      $(".scrollLoading").scrollLoading();3 </script>

表示所有class為scrollLoading的元素繫結了滾動式載入的方法。

　　在HTML5中，以data-開頭的自訂屬性都是合法的，且地址可以是圖片，頁面等。所以，我設定了綁定地址的自訂屬性為”data-url”，此屬性值設為真實的圖片（或頁面）地址就可以了。例如下面：　　

1  <img class="scrollLoading" data-url="image/mm/00_00.jpg" src="image/pixel.gif" width="630" height="420" style="background:url(image/loading.gif) no-repeat center;" />

會在滾動時載入名為data-url的圖片路徑。對於常用的圖片，還有一點小問題，就是其預設的src圖片地址。其src地址不能是真實的圖片地址（否則會直接一次性全部載入），也不能是空地址或是壞地址，否則IE瀏覽器下會出現很驚悚的紅叉叉。我的做法是預設連結的是一個1px * 1px的gif透明圖片（大小很小），同時可以透出後面載入中gif動畫圖片，當滾動式載入的時候直接把此gif圖片替換掉。

scrollLoading是個很簡單很小的外掛程式，見下表：

參數	預設	釋義
attr	data-url	擷取元素載入地址的屬性名稱

就這些了。此外掛程式只適用於頁面預設捲軸的動態載入。對於內部div之類的滾動式載入不支援。根據部分要求，現增加兩個選擇性參數，一個為container表示容器，另一個為callback表示回調。具體參見下表：

參數	預設	釋義
attr	data-url	擷取元素載入地址的屬性名稱
container	$(window)	滾動的容器。預設為$(window)，也就是預設的網頁滾動。
callback	$.noop	回調。元素動態載入完畢後執行的回呼函數。其中回呼函數的上下文this就是當前DOM元素。注意：如果無法擷取元素載入地址，則不執行動態載入，但是會觸發回調。在某些需求下，您可以預設url值，僅僅觸發回調。

使用方法如下：

1 $(".scrollLoading").scrollLoading({2     container: $("#zxxMainCon"),3     callback: function() {4         this.style.border = "3px solid #a0b3d6";    5     }6 });

附件下載：下載

頁面滾動圖片等元素動態載入外掛程式jquery.scrollLoading.js