js去除浏览器默认底图的方法


Posted in Javascript onJune 08, 2015

本文实例讲述了js去除浏览器默认底图的方法。分享给大家供大家参考。具体分析如下:

我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个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程序设计有所帮助。

Javascript 相关文章推荐
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
Javascript中typeof 用法小结
May 12 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
angularjs+bootstrap实现自定义分页的实例代码
Jun 19 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
vue中简单弹框dialog的实现方法
Feb 26 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
送你43道JS面试题(收藏)
Jun 17 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
解决Layui数据表格的宽高问题
Sep 28 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 #Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 #Javascript
js控制网页前进和后退的方法
Jun 08 #Javascript
js禁止页面刷新与后退的方法
Jun 08 #Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 #Javascript
jQuery处理图片加载失败的常用方法
Jun 08 #Javascript
简介JavaScript中fixed()方法的使用
Jun 08 #Javascript
You might like
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
浅谈vue,angular,react数据双向绑定原理分析
2017/11/28 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python字符串判断密码强弱
2020/03/18 Python
编码实现字符串转整型的函数
2012/06/02 面试题
如何写出好的Java代码
2014/04/25 面试题
工地材料员岗位职责
2015/04/11 职场文书
总经理年会致辞
2015/07/29 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android