你的位置:首页 > 网页设计

[网页设计]移动设备的HTML页面中图片实现滚动加载


  如今移动互联网风靡全球,移动页面的元素也是丰富多彩,一个移动页面的图片超过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"

     

     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){

  //添加属性
  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这个小产品的作者,诚邀大家多多体验!