如果一個網頁很長，那麽該頁面的加載時間也會相應的較長。而這裏給大家介紹的這個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是個很簡單很小的插件，見下表：

就這些了。此插件只適用於頁面默認滾動條的動態加載。對於內部div之類的滾動加載不支持。根據部分要求，現增加兩個可選參數，一個為container表示容器，另一個為callback表示回調。具體參見下表：

使用方法如下：

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

附件下載：下載

頁面滾動圖片等元素動態加載插件jquery.scrollLoading.js