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

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

  我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个loading动画效果,而不是由空白到一下子出来。

  在zen cart的二次开发过程中同样也遇到了这个问题,下面是我的解决方案。

  首页给图片设置一个默认的loading动画,再分配一个id,

  如实际上加载过程通过一个函数来完成

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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这个动画过渡图片。使用代码很简单

  ?

1
2
3
4

<img id="loading1″ src="loading.gif" />
<script language="javascript">
loadImage("loading1″,"baidu_logo.gif");
</script>

  希望本文所述对大家的javascript程序设计有所帮助。

时间: 2024-11-18 16:06:55

js去除浏览器默认底图的方法的相关文章

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

本文实例讲述了js去除浏览器默认底图的方法.分享给大家供大家参考.具体分析如下: 我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个loading动画效果,而不是由空白到一下子出来. 在zen cart的二次开发过程中同样也遇到了这个问题,下面是我的解决方案. 首页给图片设置一个默认的loading动画,再分配一个id, 如<img  id="loading1″  src="loading.gif">实际上加载过程通过一个函数来完成 fun

js阻止浏览器默认行为触发的通用方法(推荐)_javascript技巧

js阻止浏览器默认行为触发的通用方法(推荐) //阻止浏览器默认行为触发的通用方法 function stopDefault(e){ //防止浏览器默认行为(W3C) if(e && e.preventDefault){ e.preventDefault(); } //IE中组织浏览器行为 else{ window.event.returnValue=fale; } return false; } 以上这篇js阻止浏览器默认行为触发的通用方法(推荐)就是小编分享给大家的全部内容了,希望能给

js在浏览器兼容教程:DOM方法及对象引用

文章简介:js在浏览器兼容教程:DOM方法及对象引用. 1. getElementById [分析说明]先来看一组代码: <!-- input对象访问1 --><input id="id" type="button" value="click me" ōnclick="alert(id.value)"/> 在Firefox中,按钮没反应,在IE中,就可以,因为对于IE来说,一个HTML 元素的 ID 可

利用js ActiveXObject浏览器全屏实现方法

利用js activexobject浏览器全屏实现方法 activexobject对象是启用并返回 automation 对象的引用.使用方法: newobj = new activexobject( servername.typename[, location]) activexobject 对象语法有这些部分:其中newobj是必选项.要赋值为 activexobject 的变量名. servername是必选项.提供该对象的应用程序的名称. typename是必选项.要创建的对象的类型或类

js阻止浏览器默认行为的简单实例_javascript技巧

js阻止浏览器默认行为的简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a id="a1" href="http://www.baidu.com">百度</a> <script> fun

JS去除右边逗号的简单方法_javascript技巧

复制代码 代码如下: function rtrim(s) { var lastIndex = s.lastIndexOf(',');    if (lastIndex > -1) {        s = s.substring(0, lastIndex);     }    return s; } function substring(start : Number, end : Number) : String参数start 必选.从 0 开始的索引整数,指示子字符串的起始位置. end 必选

js停止冒泡和阻止浏览器默认行为的简单方法_javascript技巧

停止冒泡通用方法: function stopBubble(e) { //如果提供了事件对象,是非IE浏览器 if ( e && e.stopPropagation ) //使用W3C的stopPropagation()方法 e.stopPropagation(); else //使用IE的cancelBubble = true来取消事件冒泡 window.event.cancelBubble = true; } 阻止浏览器默认行为-通用方法 //阻止浏览器的默认行为 function s

JS去除重复并统计数量的实现方法_javascript技巧

js去除重复并统计数量方法 首先点击按钮触发事件,然后用class选择器,迭代要获取的文本(这里最好用text()方法)加入到Array()集合里.然后创建一个map{},遍历Array()集合,取一个值作为map的key,然后判断是否有值,如果没有就输入值1,如果有就累加1.最后就可以统计出重复的有多少个. for(var key in map){}为迭代方法. 这里附上文本格式,方便大家复制. jQuery("#count").on("click",functi

js检测浏览器类型代码

js检测浏览器类型代码, 方法1 var ua = navigator.userAgent.toLowerCase(); var binfo = {     ve : ua.match(/.+(?:rv|it|ra|ie|me)[/: ]([d.]+)/)[1],     ie : /msie/.test(ua) && !/opera/.test(ua),     op : /opera/.test(ua),     sa : /version.*safari/.test(ua),