本文实例讲述了js去除浏览器默认底图的方法。分享给大家供大家参考。具体分析如下:
我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个loading动画效果,而不是由空白到一下子出来。
在zen cart的二次开发过程中同样也遇到了这个问题,下面是我的解决方案。
首页给图片设置一个默认的loading动画,再分配一个id, 如一个函数来完成
rush:js;">
function addListener(element,type,expression,bubbling) {
bubbling = bubbling || false;
if(window.addEventListener) { // Standard
element.addEventListener(type,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这个动画过渡图片。使用代码很简单
rush:js;">
希望本文所述对大家的javascript程序设计有所帮助。
原文地址:https://www.jb51.cc/js/54017.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。