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

来源：动视网责编：小采时间：2020-11-27 16:05:08

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

移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose:如今移动互联网风靡全球，移动页面的元素也是丰富多彩，一个移动页面的图片超过10张已经是再正常不过的事情了。但是相对，很多移动用户还停留在2G，3G这样的网络中。那么这样带宽的用户，在浏览这样的页面时，要把页面加载完毕，可能就需要10s，20s甚至更多

推荐度：

点击下载本文 文档为doc格式

导读移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose:如今移动互联网风靡全球，移动页面的元素也是丰富多彩，一个移动页面的图片超过10张已经是再正常不过的事情了。但是相对，很多移动用户还停留在2G，3G这样的网络中。那么这样带宽的用户，在浏览这样的页面时，要把页面加载完毕，可能就需要10s，20s甚至更多

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

1、效果图。

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

2、前端代码实现

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

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

　　　　　style="background:url(images/scrollLoading/loading.gif) no-repeat center;"

　　　　　xSrc="/Uploads-s/new/2019-09-27-201927/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代码中，引入文件的格式如下所示：