欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

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

1、效果图。

  

         这是加载过程中的图片菊花显示 这是加载成功后的图片

2、前端代码实现

  2.1、一个正常的图片的HTML代码应该是如下的:

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

  2.2、把图片变成滚动加载后,图片的HTML代码应该是这样的:

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

     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文件是有位置要求的,要在