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 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JavaScript之AOP编程实例
Jul 17 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
javascript实现二分查找法实现代码
2007/11/12 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
用js判断输入是否为中文的函数
2014/03/10 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
js图片跟随鼠标移动代码
2015/11/26 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python isinstance函数介绍
2015/04/14 Python
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
django2.0扩展用户字段示例
2019/02/13 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
python 19个值得学习的编程技巧
2020/08/15 Python
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server