这篇文章主要介绍了 js 去除浏览器默认底图的方法, 可以实现图片 loading 预加载效果, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 去除浏览器默认底图的方法。分享给大家供大家参考。具体分析如下:
我们在设计一些图片比较多的网页时,为了增强用户体验,希望图片加载的时候有个 loading 动画效果,而不是由空白到一下子出来。
在 zen cart 的二次开发过程中同样也遇到了这个问题,下面是我的解决方案。
首页给图片设置一个默认的 loading 动画,再分配一个 id,
如实际上加载过程通过一个函数来完成
- 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 程序设计有所帮助。
来源: