如今移動互聯網風靡全球,移動頁面的元素也是豐富多彩,一個移動頁面的圖片超過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;
}