移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose
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文件是有位置要求的,要在
上一篇: apache2和mvc框架的配置路径有关问题(急)
下一篇: 如何简便快速的续费一台预付费实例
推荐阅读
-
js获取html页面代码中图片地址的实现代码
-
编写的jsp页面,为什么IE网页上不能显示加载的图片?_html/css_WEB-ITnose
-
移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose
-
CSS中的背景图片加图片加文字如何实现,谢谢!_html/css_WEB-ITnose
-
利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的_html/css_WEB-ITnose
-
《DOM编程艺术》中初步实现的图片库的总结(一)_html/css_WEB-ITnose
-
HTML 网站中怎么实现数字控制图片移动_html/css_WEB-ITnose
-
移动设备的HTML页面中图片实现滚动加载_html/css_WEB-ITnose
-
在selenium中,如何让滚动条滚动到指定页面元素的高度 链接整理_html/css_WEB-ITnose
-
利用简洁的图片预加载组件提升html5移动页面的用户体验