如何检测IE8
六 15

非侵入式 “images loading”

By kunkka javascript / Dom, 原创 Add comments

当我们在浏览一个网站的时候，由于受到网速(或者带宽)的影响，大幅的或高质量图片的载入速度将显得非常慢。虽然你可以通过压缩图片的尺寸，或者通过服务器端的技术来优化，但也无法从根本上解决问题，给用户好的浏览体验。

“images loading”是个不错的增强用户体验的方法。要判断图片是否载入成功，常用的方法是image的onload方法，或者通过image的complete属性来判断图片的当前载入状态，

下面就以上两种方法分别给出解决方案

//使用'onload'方法的解决方案
function addLoadEvent(loadEvent,waitForImages) {
    if(waitForImages) {
        return addEvent(window, 'load', loadEvent);
    }
    var init = function() {
        if (arguments.callee.done) return;
        arguments.callee.done = true;
        loadEvent.apply(document,arguments);
    };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", init, false);
    }
    if (/WebKit/i.test(navigator.userAgent)) {
        var _timer = setInterval(function() {
            if (/loaded|complete/.test(document.readyState)) {
                clearInterval(_timer);
                init();
            }
        },10);
    }
    /*@cc_on @*/
    /*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function() {
        if (this.readyState == "complete") {
            init();
        }
    };
    /*@end @*/
    return true;
} 
 
function photoShow(o,parm){
   this.o = document.getElementById(o);
   this.imgs = this.o.getElementsByTagName("img");
   this.loadImg = parm.loadImg;
   this.init();
}
photoShow.prototype = {
   init:function (){
     var _this = this;
     var length = this.imgs.length;
     for (var i = 0 ; i<length ; i++ ) {
         if(this.imgs[i].complete) continue;
         this.imgs[i].style.display = 'none';
         this.imgs[i].parentNode.style.background  = 'url(' + this.loadImg + ') no-repeat center';
         this.imgs[i].onload = function (){ _this.showPic(this)}
     };
   },
   showPic : function (o){
      o.parentNode.style.background = 'none';
      o.style.display = 'block';
      var _this = this , count = 0;
      (function (){
        if(count >= 100) { return;}
        count += 5;
        _this.setOpacity(o,count)
        setTimeout( arguments.callee , '10')
       })()
   },
   setOpacity : function( elem, level ) {
       if ( elem.filters )
           elem.style.filter = 'alpha(opacity=' + level + ')';
       else
           elem.style.opacity = level / 100;
   }
}
addLoadEvent(function(){
new photoShow('photos01',{loadImg:'31-0.gif'})
new photoShow('photos02',{loadImg:'32-0.gif'})
},false)
//使用'complete'属性的解决方案
function addLoadEvent(loadEvent,waitForImages) {
     if(waitForImages) {
         return addEvent(window, 'load', loadEvent);
     }
     var init = function() {
         if (arguments.callee.done) return;
         arguments.callee.done = true;
         loadEvent.apply(document,arguments);
     };
     if (document.addEventListener) {
         document.addEventListener("DOMContentLoaded", init, false);
     }
     if (/WebKit/i.test(navigator.userAgent)) {
         var _timer = setInterval(function() {
             if (/loaded|complete/.test(document.readyState)) {
                 clearInterval(_timer);
                 init();
             }
         },10);
     }
     /*@cc_on @*/
     /*@if (@_win32)
     document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
     var script = document.getElementById("__ie_onload");
     script.onreadystatechange = function() {
         if (this.readyState == "complete") {
             init();
         }
     };
     /*@end @*/
     return true;
} 
 
function photoShow(o,parm){
    this.o = document.getElementById(o);
    this.imgs = this.o.getElementsByTagName("img");
    this.loadImg = parm.loadImg;
    this.init();
}
photoShow.prototype = {
    init:function (){
      var length = this.imgs.length;
      for (var i = 0 ; i<length ; i++ ) {
          if(this.imgs[i].complete) continue;
          this.imgs[i].parentNode.style.background  = 'url(' + this.loadImg + ') no-repeat center';
          this.imgs[i].style.display = 'none';
          this.initImg(this.imgs[i]);
      };
    },
    initImg : function (o){
       var _this = this;
       if(o.complete) { _this.showPic(o) ; return };
       setTimeout(function (){ _this.initImg(o) } , '10')
    },
    showPic : function (o){
       o.parentNode.style.background = 'none';
       o.style.display = 'block';
       var _this = this , count = 0;
       (function (){
         if(count >= 100) {return;}
         count += 5;
         _this.setOpacity(o,count)
         setTimeout( arguments.callee , '10')
        })()
    },
    setOpacity : function( elem, level ) {
        if ( elem.filters )
            elem.style.filter = 'alpha(opacity=' + level + ')';
        else
            elem.style.opacity = level / 100;
    }
}
addLoadEvent(function(){
 new photoShow('photos01',{loadImg:'31-0.gif'})
 new photoShow('photos02',{loadImg:'32-0.gif'})
},false)

上面用到了addLoadEvent方法，用于在页面DOM载入完成后立即执行相应的函数，

以上两段代码从性能上讲显然是使用onload方法更好点，onload是当图像装载完毕时调用的事件句柄。而complete属性是返回浏览器是否已完成对图像的加载,是一种当前状态，返回的值是布尔值。结合此列来讲，要判断images是否加载完成，就要反复的判断image.complete是否为真，这样就要用到setTimeout或者setInterval函数，这也将增大浏览器的开销。

Leave a Reply

preload preload preload