如今移動互聯網風靡全球，移動頁面的元素也是豐富多彩，一個移動頁面的圖片超過10張已經是再正常不過的事情了。但是相對，很多移動用戶還停留在2G，3G這樣的網絡中。那麼這樣帶寬的用戶，在浏覽這樣的頁面時，要把頁面加載完畢，可能就需要10s，20s甚至更多，嚴重影響用戶的體驗。針對這樣的問題，讓頁面中的圖片滾動加載（圖片出現在顯示器屏幕上時再加載圖片）顯得非常重要！這樣也可以有效地節省我們服務器的帶寬和解決請求大並發的問題。
1、效果圖。
這是加載過程中的圖片菊花顯示 這是加載成功後的圖片
2、前端代碼實現
2.1、一個正常的圖片的Html代碼應該是如下的：
<img width="360" height="200" src=/School/UploadFiles_7810/201603/20160313124302992.jpg" />
2.2、把圖片變成滾動加載後，圖片的Html代碼應該是這樣的：
<img width="360" height="200" src=/School/UploadFiles_7810/201603/20160313124302135.gif"
style="background:url(images/scrollLoading/loading.gif) no-repeat center;"
xSrc=/School/UploadFiles_7810/201603/20160313124302992.jpg"/>
參數說明：
src:這是一個1px * 1px的gif透明圖片（大小很小）。src的地址是絕對不能錯誤的（如果錯誤的話，浏覽器很出現個紅叉的符號。），為此，我選擇用一張很小很小的圖片來替代。
sytle:這裡主要是個菊花顯示的背景圖片，目的就是為了在浏覽器請求服務器圖片的加載過程中，顯示一個菊花加載圖
xSrc:這個是個自定義的屬性，放的是img圖片的正確地址。
2.3、Html加載後，要實現滾動加載，還需要引入一個JS文件。由於移動互聯網的帶寬非常有限，而jquery的最小的一個JS文件也要100K左右，因此，很多移動互聯網頁面都會拋棄使用jquery。給予這樣的條件，我自己用原生的Javascript寫了對應的js（這個JS只有3K的數據量）。引用這個JS文件是有位置要求的，要在</body>這個標簽的前一行，否則不能實現滾動加載。
JS的下載地址：到www.manyjar.com這個網站上，搜索myscrollLoading，即可找到該文件的下載。
或者直接下載這個鏈接：http://www.manyjar.com/download?storeName=m/myscrollLoading/myscrollLoading.JS
（manyjar這個網站提供了非常巨量的jar文件下載，Java的學習者或者開發者工程師，應該挺實用的，推薦大家可以多去看看）
在Html代碼中，引入文件的格式如下所示：
<script type="text/Javascript" src="js/scrollLoading/myscrollLoading.JS"></script>
</body>
2.4、完成好的例子http://www.whyt.Net.cn/net/preArticel?wxusername=o4Yv7t3nof9hS6TYGQhvioCWrt5Q&id=115
這個例子在2G網絡中，顯示特別友好！
3、後台修改Html代碼
前提：工程中已經所有的代碼都實現好了，管理員是通過百度編輯器之類的富文本編輯器來寫移動端文章的。那麼此時我們要實現的是，不增加管理員的任何工作，就讓我們的前端代碼實現這個圖片滾動加載機制的功能呢？
思路：在前端頁面要拿去富文本編輯器內容時，把拿到的Html代碼的內容進行修改，然後在放到前端去顯示。
我們這裡以Java為例子。讓程序修改html代碼，我們要做的工作就是模擬浏覽器內核，把Html的標簽全部以dom元素加載出來，再進行修改。
這裡我們用到JSoup-1.6.1.jar這個jar包。
到www.manyjar.com這個網站上，搜索JSoup，找到對應的jar下載即可。
或者直接下載這個鏈接：http://www.manyjar.com/download?storeName=j/jsoup/JSoup-1.6.1.jar.zip
直接導入到工程中，Html代碼修改的實現代碼如下所示：
public String htmlToLoadingHtml(String Html){
Document doc = JSoup.parse(Html);
Elements links=doc.getElementsByTag("img");
for(Element link : links){
//添加class="scrollLoading"屬性
String strClass=link.attr("class");
if(strClass==nullstrClass.length()==0){
link.attr("class","scrollLoading");
}else{
link.attr("class","scrollLoading "+strClass);
}
//添加data-url屬性，值為src的值
String strSrc=link.attr("src");
// link.attr("data-url",strSrc);
link.attr("xSrc",strSrc);
//把src的值修改成一個1px * 1px的gif透明圖片（大小很小）
link.attr("src","images/scrollLoading/pixel.gif");
//修改style屬性
String strStyle=link.attr("style");
//如果是jpg類型的圖片，就把背景圖等待的菊花圖設置上，否則不設置
if(strSrc.contains(".jpg")){
if(strStyle==nullstrStyle.length()==0){
link.attr("style","background:url(images/scrollLoading/loading.gif) no-repeat center; ");
}else{
link.attr("style","background:url(images/scrollLoading/loading.gif) no-repeat center; "+strStyle);
}
}
}
html=doc.Html();
return Html;
}