lazy loading טעינה איטית

לפעמים רוצים שדף יעלה מהר בטעינה ראשונית, אפשר לגרום לדף לעלות יותר מהר אם לא נטען את התמונות בהעלאה אלא רק אחר כך במיוחד אם יש תמונות בדף שלא מוצגות בטעינה הראשונית אלא רק אחרי לחיצה והם על display:none. כי למרות שהם לא מוצגות הם מאטות את טעינת הדף

השיטה אומרת ככה בטעינה הראשונית לא להשים ב src של התמונה את הקישור האמיתי אלא בשדה נוסף שנקרא לו data-src

דוגמא :

<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">

ולאחר טעינת הדף להחליף את הקישור בקישור האמיתי.

/* lazyload.js (c) Lorenzo Giuliani
 * MIT License (http://www.opensource.org/licenses/mit-license.html)
 *
 * expects a list of:  
 * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
 */

!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);
              });
            }
          };
        }
      ;
    // Array.prototype.slice.call is not callable under our lovely IE8 
    for (var i = 0; i < query.length; i++) {
      images.push(query[i]);
    };

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

}(this);​

 

יש סקריפטים בשביל זה :

http://www.appelsiini.net/projects/lazyload

הסבר :

https://css-tricks.com/snippets/javascript/lazy-loading-images/

פלאגין של וורדפרס שעושה את זה :

https://wordpress.org/plugins/lazy-load/

 

שאלה שהרבה פעמים חוזרת על עצמה….

האם כאשר נשים אלמנט ב display:none זה ישפר את מהירות טעינת האתר?

תשובה : לא. עדיין התמונה תיטען, אולי זה יעזור ברינדור אבל זה זניח.

ניתן לבדוק את מהירות טעינת האתר ע"י כלי של גוגל

https://developers.google.com/speed/pagespeed/insights/

מכניסים את האתר הוא עושה אנליזה נותן ציון, ואומר גם מה צריך לתקן כלי מאוד מומלץ.