js去除浏览器默认底图的方法
2015-06-08 10:33
691 查看
我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个loading动画效果,而不是由空白到一下子出来。
在zen cart的二次开发过程中同样也遇到了这个问题,下面是我的解决方案。
首页给图片设置一个默认的loading动画,再分配一个id,
如<img id="loading1″ src="loading.gif">实际上加载过程通过一个函数来完成
function addListener(element, type, expression, bubbling) { bubbling = bubbling || false; if(window.addEventListener) { // Standard element.addEventListener(type, expression, bubbling); return true; } else if(window.attachEvent) { // IE element.attachEvent('on' + type, expression); return true; } else return false; } var ImageLoader = function(url){ this.url = url; this.image = null; this.loadEvent = null; }; ImageLoader.prototype = { load:function(){ this.image = document.createElement_x('img'); var url = this.url; var image = this.image; var loadEvent = this.loadEvent; addListener(this.image, 'load', function(e) { if(loadEvent != null){ loadEvent(url, image); } }, false); this.image.src = this.url; }, getImage:function(){ return this.image; } }; function loadImage(objId,urls) { var loader = new ImageLoader(urls); loader.loadEvent = function(url){ obj = document.getElementByIdx_x(objId); obj.src = url; } loader.load(); }
通过loadImage函数就可以为指定的图片添加加载过程,其中通过addListener 函数注册事件,
使得在图片加载完成的时候能够自动替换掉loading.gif这个动画过渡图片。使用代码很简单
<img id="loading1″ src="loading.gif" /> <script language="javascript"> loadImage("loading1″,"http://www.baidu.com/img/baidu_logo.gif"); </script>
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Android Manifest 用法
- Android学习笔记(二九):嵌入浏览器
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- Extjs4.0 最新最全视频教程
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- 浏览器 cookie 限制
- js可突破windows弹退效果代码
- 玩转浏览器IE7的5个顶级使用技巧
- JSP脚本漏洞面面观
- 字符集导致的浏览器跨站脚本攻击分析
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 更改IE浏览器的图标
- 如何创建ajax对象并兼容多个浏览器
- css ie6 ie7 ff的CSS hack使用技巧
- CSS 浏览器的等宽空格问题解决
- 区分IE6,IE7,firefox的CSS hack
- 爆炸式的JS圆形浮动菜单特效代码