移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose

如今移动互联网风靡全球，移动页面的元素也是丰富多彩，一个移动页面的图片超过10张已经是再正常不过的事情了。但是相对，很多移动用户还停留在2G，3G这样的网络中。那么这样带宽的用户，在浏览这样的页面时，要把页面加载完毕，可能就需要10s，20s甚至更多，严重影响用户的体验。针对这样的问题，让页面中的图片滚动加载（图片出现在显示器屏幕上时再加载图片）显得非常重要！这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题。

　　　　这个例子在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;
　　}

祝大家圆满完成这个技术！我是www.manyjar.com这个小产品的作者，诚邀大家多多体验！

查看更多关于移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose的详细内容...