原生javascript圖片惰性延遲加載插件lazyload–兼容PC端手機端

 

爲何須要頁面圖片惰性延遲加載?

當頁面內圖片達到必定的數量,頁面的加載速度就愈來愈差.

咱們並不須要把全部圖片一次性加載完,並且,用戶也不會一次性把全部圖片看完.

因此,咱們須要作的就是按需加載,只顯示用戶須要看的圖片

 

圖片惰性延遲加載好處

1. 按需加載圖片,加快加載頁面速度

2. 減小對服務器的請求數

3. 減小初始頁面加載頁面大小

 

圖片惰性延遲加載壞處

1. SEO,由於圖片都被替換成假的圖片,因此會影響圖片的收錄,因此這功能不建議在詳情頁使用

 

圖片惰性延遲性能對比

未加圖片惰性加載功能:

已加圖片惰性加載功能:

 

(FF firebug測試數據)由圖片能夠看出,請求數,頁面大小,加載時間,都快了將近一倍~!!!

 

圖片惰性延遲加載程序思路

1. 把須要延遲加載的圖片加一個標識

2. 獲取這些被標識的圖片離頁面頂部的高度

3. 添加瀏覽器滾動條事件,當滾動條滑動時,判斷有哪些圖片在這個可視區域內

4. 把可視區域內的圖片替換真實的圖片

5. 去除已替換成功的圖片的標識

6. 若所有圖片已替換,移去滾動條事件

 

圖片惰性延遲加載關鍵代碼

1. 獲取圖片距離頁面頂部的高度

get_pos:function(elem){
    if(!elem) return false;
    var left = elem.offsetLeft,
    top = elem.offsetTop,
    current = elem;
    if(!top){
        while(current!=document && current!=null && !current.offsetTop){ 
         current = current.parentNode ;
    }
 }else{
       current = elem.offsetParent || elem.parentNode ;
 }
 while(current!=document && current!=null){
       left += current.offsetLeft;
       top += current.offsetTop;
       current = current.offsetParent || current.parentNode ;
 }
       return {"left": left, "top": top};
 }

 

咱們利用offsetTop和offsetParent獲取當前元素離頁面頂部高度

*這裏須要注意,在IE瀏覽器,隱藏的元素的offsetTop值會是0

 

2.獲取頁面可視區域底部到頁面頂部的距離

 1 var winHeight=win.innerHeight || document.documentElement.clientHeight; 2 3 4 var scrTop=document.body.scrollTop || document.documentElement.scrollTop; 

*這裏須要注意IE和webkit獲取滾動條滾動距離和頁面可視區域高度的方式都不一樣

 

3.判斷圖片是否在可視區域內

 1 if(iSrc){
 2    if(winHeight+scrTop+This.img.lazy>=node.xLazyPos.top && scrTop−This.img.lazy<=node.xLazyPos.top){
 3     var img=new Image();
 4        img.onload = function(){
 5        node.setAttribute('src',iSrc);
 6    };
 7      img.src=iSrc;
8  }

 

 

圖片惰性延遲加載進階效果

1. 當瀏覽器可視區域大小變化的時候,圖片距離頁面頂部的距離將會改變,這時咱們應該從新獲取數據

2. 圖片替換時可加一個漸變效果,這樣會不會感受那麼生硬

3. 滾動條左右滑動顯示圖片

4. ect

 

圖片惰性延遲加載用法

1. 插入JS

<script type="text/javascript" src="xManLazyLoad.js" ></script>

2.修改圖片須要惰性加載的圖片屬性

1 <img src="http://placehold.it/90x90"  class="xLazyClass" xLazyImg="http://image.game.uc.cn/2014/3/6/9656443.png" />

1. src:  初始加載的假圖片

2. class: 插件會搜class帶有 xLazyClass 這名稱的圖片

3. xLazyImg: 圖片的真實路徑,預備替換

作完已經兩個步驟就能夠了,接下來的工做就交給JS插件吧~

PS:若是你嫌棄個人 xLazyClass 和 xLazyImg 名字太長,能夠修改下喔

1 <script type="text/javascript" src="xManLazyLoad.js" id="xManLazyLoad" xdata-class="Class" xdata-attr="Img" xdata-lazy="100" ></script>

1. id: 若是要修改設置必須加上 xManLazyLoad

2. xdata-class: 修改須要標識的class的名稱,若是修改爲 xdata-class="aImg" ,則插件只會搜class是aImg的圖片

3. xdata-attr: 修改圖片的真實路徑名稱,若是修改則將本來的  xLazyImg 修改爲其餘 

4. xdata-lazy: 惰性值,就是滾動條的惰性範圍,默認是 20 

 

插件源碼:

 

/**
 * 名稱:xmanLazyLoad
 * 功能:網頁圖片惰性加載,兼容各瀏覽器
 * 用法: 使用方法:
    1.加載JS
        <script type="text/javascript" src="lazy_load.js" ></script>
    2.設置IMG屬性
        <img src="http://placehold.it/90x90"  class="xLazyClass" xLazyImg="http://image.game.uc.cn/2014/2/17/9631225.jpg" alt="仙劍奇緣"/>
    API
    1.設置class
    須要惰性加載的圖片class="xLazyClass"
    2.設置圖片真實路徑
    xLazyImg="http://image.game.uc.cn/2014/2/17/9631225.jpg"
    3.設置圖片假路徑
    src="http://placehold.it/90x90"
 * @author luozx
 * @Email luozx@ucweb.com
 * @version 1.0.0
 * @dependencies none
 */
(function(a,b){var c={getByClass:function(a,b){for(var c=a.getElementsByTagName("*"),d=[],e=new RegExp("\\b"+b+"\\b","i"),f=0;f<c.length;f++)e.test(c[f].className)&&d.push(c[f]);return d},get_pos:function(a){if(!a)return!1;var b=a.offsetLeft,c=a.offsetTop,d=a;if(c)d=a.offsetParent||a.parentNode;else for(;d!=document&&null!=d&&!d.offsetTop;)d=d.parentNode;for(;d!=document&&null!=d;)b+=d.offsetLeft,c+=d.offsetTop,d=d.offsetParent||d.parentNode;return{left:b,top:c}},removeClass:function(a,b){if(!a||!a.className)return!1;for(var c=a.className.split(" "),d=!1,e=0;e<c.length;e++)if(c[e]===b){c.splice(e,1),d=!0;break}if(d){if(a.className="",c.length<1)return d;if(1==c.length)a.className=c[0];else if(c.length>1)for(var e=0;e<c.length;e++)a.className+=e==c.length-1?c[e]:c[e]+" "}return d},addEvent:function(a,b,c){if(a){if(a.addEventListener)return a.addEventListener(b,c,!1);if(a.attachEvent)return a.attachEvent("on"+b,c);a["on"+b]=c}},removeEvent:function(a,b,c){if(a){if(a.removeEventListener)return a.removeEventListener(b,c,!1);if(a.detachEvent)return a.detachEvent("on"+b,c);a["on"+b]=null}},startMove:function(a,b,d){clearInterval(a.timer),a.timer=setInterval(function(){var e=!0;for(var f in b){var g=0;g=parseInt("opacity"==f?100*parseFloat(c.getStyle(a,f)):c.getStyle(a,f));var h=(b[f]-g)/8;h=h>0?Math.ceil(h):Math.floor(h),g!=b[f]&&(e=!1),"opacity"==f?(a.style.filter="alpha(opacity:"+(g+h)+")",a.style.opacity=(g+h)/100):a.style[f]=g+h+"px"}e&&(clearInterval(a.timer),d&&d())},30)},getStyle:function(a,b){return a.currentStyle?a.currentStyle[b]:getComputedStyle(a,!1)[b]}},d={init:function(){this.parm(),this.getImg(),this.getPos(),this.bindEvent(),this.lazyShow()},parm:function(){var a=b.getElementById("xManLazyLoad");this.img={},this.img.onerrorImgUrl="",this.img.srcStore=a?a.getAttribute("xdata-attr"):"xLazyImg",this.img.className=a?a.getAttribute("xdata-class"):"xLazyClass",this.img.lazy=a?parseInt(a.getAttribute("xdata-lazy")):20},getImg:function(){this.img.node=c.getByClass(b.getElementsByTagName("body")[0],this.img.className),this.img.length=this.img.node.length},getPos:function(){for(var a=d,b=0;b<a.img.node.length;b++)a.img.node[b].xLazyPos=c.get_pos(a.img.node[b])},bindEvent:function(){this.img.node.length>0&&(c.addEvent(a,"scroll",this.lazyShow),c.addEvent(a,"resize",this.getPos))},lazyShow:function(){var e=d,f=a.innerHeight||document.documentElement.clientHeight,g=document.body.scrollTop||document.documentElement.scrollTop;if(e.img.length>0)for(var h=0;h<e.img.node.length;h++)~function(a){var b=e.img.node[a],d=b.getAttribute(e.img.srcStore);if(d&&f+g+e.img.lazy>=b.xLazyPos.top&&g-e.img.lazy<=b.xLazyPos.top){var h=new Image;h.onload=function(){b.style.filter="alpha(opacity:0)",b.style.opacity=0,b.setAttribute("src",d),e.img.length--,c.startMove(b,{opacity:100}),c.removeClass(b,e.img.className),b.removeAttribute(e.img.srcStore)},h.src=d}}(h);else e.img.node=c.getByClass(b.getElementsByTagName("body")[0],e.img.className),e.img.length=e.img.node.length,e.img.length<=0&&c.removeEvent(a,"scroll",e.lazyShow),c.removeEvent(a,"resize",e.getPos)}};d.init()}(window,document));

View Code