如今移动互联网风靡全球，移动页面的元素也是丰富多彩，一个移动页面的图片超过10张已经是再正常不过的事情了。但是相对，很多移动用户还停留在2g，3g这样的网络中。那么这样带宽的用户，在浏览这样的页面时，要把页面加载完毕，可能就需要10s，20s甚至更多，严重影响用户的体验。针对这样的问题，让页面中的图片滚动加载（图片出现在显示器屏幕上时再加载图片）显得非常重要！这样也可以有效地节省我们服务器的带宽和解决请求大并发的问题。
1、效果图。
这是加载过程中的图片菊花显示                                                 这是加载成功后的图片
2、前端代码实现
2.1、一个正常的图片的html代码应该是如下的：
2.2、把图片变成滚动加载后，图片的html代码应该是这样的：
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文件是有位置要求的，要在
这个标签的前一行，否则不能实现滚动加载。
js的下载地址：到www.manyjar.com这个网站上，搜索myscrollloading，即可找到该文件的下载。
或者直接下载这个链接：http://www.manyjar.com/download?storename=m/myscrollloading/myscrollloading.js
（manyjar这个网站提供了非常巨量的jar文件下载，java的学习者或者开发者工程师，应该挺实用的，推荐大家可以多去看看）
在html代码中，引入文件的格式如下所示：
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;
}
祝大家圆满完成这个技术！我是www.manyjar.com这个小产品的作者，诚邀大家多多体验！