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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 完美兼容多浏览器的js判断图片路径代码汇总

    第一种方式 //检查图片是否存在 function CheckImgExists(imgurl) { var ImgObj = new Image(); //判断图片是否存在 ImgObj.src = imgurl; //没有图片,则返回-1 if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) { alert(imgurl + '存在'); } else { alert(imgurl +

  • JS预览图像将本地图片显示到浏览器上

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"&

  • js loading加载效果实现代码

    复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) { ShowLoading(); System.Threading.Thread.Sleep(10000); ClientScript.RegisterClientScriptBlock(typeof(string), "", "<script>document.body.onload=function(){removeLoadMsg()

  • JS Loading功能的简单实现

    JS Loading功能的简单实现

    我们经常在浏览网页的时候会看到数据在加载时,出现的LOADING提示.其实这个功能原理是很简单的,就是一个DIV遮盖当前页面,然后Loading就在遮盖DIV层上展示出来,现在我们来动手实现一下. 1.当前页面: 复制代码 代码如下: <div class="current"><a href="#" onclick="showLoading()">Loading</a></div> 2.遮罩层: 复

  • 原生JS实现LOADING效果

    纯文本loading效果,可以自己定义颜色和速度 复制代码 代码如下: /** Loading animation  *  Created by 黑と白の印記 on 15/03/11.  */   function loading(element,lightColor,darkColor,speed,callback){     if(!element&&(!element.innerText||!element.textContent))return     element = type

  • js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结 原创

    最近做一个图片的自动缩小效果,发现一直用的js,竟然在firefox下无法正常啊,导致页面变形.所以自己写了个兼容性一般的代码,大家可以来讨论下原来我用的是从pjblog上的 复制代码 代码如下: //查找网页内宽度太大的图片进行缩放以及PNG纠正  function ReImgSize(){   for (i=0;i<document.images.length;i++)    {    if (document.all){     if (document.images[i].width>

  • JS中图片缓冲loading技术的实例代码

    复制代码 代码如下: var Imgvalue; var Count =13;   //图片数量 var Imgs = new Array(Count); var ImgLoaded =0; //预加载图片 function preLoadImgs() { alert('图片加载中请稍等......'); for(var i=0;i<Imgs.length;i++){ Imgs[i]=new Image(); downloadImage(i); } } //加载单个图片 function dow

  • 发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载

    好多天没有发过日志了~  最近写了一个图片浏览器,是为PHPCMS文件管理器设计的,但后来看到了Lightbox,所以就改了一下,可以给一般的网页使用. 演示及说明地址:  http://longbill.cn/down/sample/blueshow/index.htm 使用方法:   1.下载 blueshow.js文件,放到服务器上  你也可以直接使用这个: http://www.jb51.net/downtools/blueshow.js 2.在你要用此程序的网页中写上这句(在和之间):

  • jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox

    jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码 body {margin:0 auto; padding:0; text-align:center } .box400 {margin:0 auto;padding:0;width:400px} #f_menu { MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 20px } #f_men

  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    注意使用preventDefault防止浏览器的默认事件操作发生 复制代码 代码如下: <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE")>0){return true;} else{return false;} } fun

  • 浏览器图片选择预览、旋转、批量上传的JS代码实现

    浏览器图片选择预览、旋转、批量上传的JS代码实现

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用IE的filter css progid:DXImageTransform.Microsoft.AlphaImageLoader chrome/firefox则用File api的file reader 2. 图片旋转,IE用progid:DXImageTransform.Microsoft.Matr

随机推荐