如今移動互聯網風靡全球，移動頁面的元素也是豐富多彩，一個移動頁面的圖片超過10張已經是再正常不過的事情了。但是相對，很多移動用戶還停留在2G，3G這樣的網絡中。那么這樣帶寬的用戶，在瀏覽這樣的頁面時，要把頁面加載完畢，可能就需要10s，20s甚至更多，嚴重影響用戶的體驗。針對這樣的問題，讓頁面中的圖片滾動加載（圖片出現在顯示器屏幕上時再加載圖片）顯得非常重要！這樣也可以有效地節省我們服務器的帶寬和解決請求大並發的問題。
1、效果圖。
這是加載過程中的圖片菊花顯示 這是加載成功后的圖片
2、前端代碼實現
2.1、一個正常的圖片的HTML代碼應該是如下的：
<img width="360" height="200" src="http://staticone.whyt.net.cn/net/ueditor/jsp/upload/image/20150502/1430545369965005095.jpg" />
2.2、把圖片變成滾動加載后，圖片的HTML代碼應該是這樣的：
<img width="360" height="200" src="http://www.whyt.net.cn/net/images/scrollLoading/pixel.gif"
style="background:url(images/scrollLoading/loading.gif) no-repeat center;"
xSrc="http://staticone.whyt.net.cn/net/ueditor/jsp/upload/image/20150502/1430545369965005095.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==null||strClass.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==null||strStyle.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;
}
喜歡請微信掃描下面二維碼，關注我公眾號--“精修Java”，做一些實戰項目中的問題和解決方案分享。
