کد جاوا اسکریپت (نمایش تصویر بعد از بارگزاری)

Share on facebook
Share on google
Share on twitter
Share on linkedin

اسکریپت نمایش تصویر پس از لود شدن کامل عکس

این اسکریپت پر کاربرد در بیشتر سایتهای بزرگ استفاده می شود و منجر به این می شود که تصویری را به صورت ناقص نشان ندهد . 
کد html جهت نمایش تصویر (این کد در صفحات html استفاده می شود )
<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">

کدجاوا اسکریپت (این کد را هم درودن فایل جداگانه می توانید قرار دهید و بعد آن را فراخوانی نمایید وهم می توانید در پایین صفحه درو تگ script بگزارید )

!function(window){
  var $q = function(q, res){
        if (document.querySelectorAll) {
          res = document.querySelectorAll(q);
        } else {
          var d=document
            , a=d.styleSheets[0] || d.createStyleSheet();
          a.addRule(q,'f:b');
          for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)
            l[b].currentStyle.f && c.push(l[b]);


          a.removeRule(0);
          res = c;
        }
        return res;
      }
    , addEventListener = function(evt, fn){
        window.addEventListener
          ? this.addEventListener(evt, fn, false)
          : (window.attachEvent)
            ? this.attachEvent('on' + evt, fn)
            : this['on' + evt] = fn;
      }
    , _has = function(obj, key) {
        return Object.prototype.hasOwnProperty.call(obj, key);
      }
    ;


  function loadImage (el, fn) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el)
      else
        el.src = src;


      fn? fn() : null;
    }
    img.src = src;
  }


  function elementInViewport(el) {
    var rect = el.getBoundingClientRect()


    return (
       rect.top    >= 0
    && rect.left   >= 0
    && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
    )
  }


    var images = new Array()
      , query = $q('img.lazy')
      , processScroll = function(){
          for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
              loadImage(images[i], function () {
                images.splice(i, i);
              });
            }
          };
        }
      ;
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };


    processScroll();
    addEventListener('scroll',processScroll);


}(this);

 

پیشنهاد پیرو برای شما :   شروع کار با کدایگنایتر
مدیر پیرو

مدیر پیرو

نظرتان را بیان نمایید

عضویت در خبر نامه