Skip to content
HTML.dk logo
  • Snippets
  • Tutorials
    • Lav din egen hjemmeside
    • Tjene penge på nettet
    • Guide til HTML
    • Guide til CSS
    • Artikler
  • Nyheder
  • Bidrag til sitet
Søgning

Sådan laver du din egen lazyload af billeder

  • HTML.dk
  • 8. april 20198. april 2019
  • jQuery / JavaScript snippets

Bruger du WordPress eller et andet form for CMS, så kan du sikkert hente et plugin der klarer tingene for dig. Men koder du dit eget site, så skal du selv hen og kode et lazyload script, som loader dine billeder når de skal bruges, og derved gør din side hurtigere.

Vi har heldigvis gjort arbejdet for dig, så du bare kan snuppe scriptet herunder!

Du skal angive det rigtige billede og en gif der skal loades før den, når du indsætter et billede:

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

Og lidt JavaScript

/* 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);​

Se demo her


Fade et billede over i et andet
Gradient tekst med CSS

Seneste artikler

  • Guide: Vælg den rigtige webshop løsning til din webshop!
  • Lækker, responsive modal-popup
  • Få det økonomiske overblik med et regnskabsprogram
  • Sådan skaber du det perfekte hjemmekontor
  • Onlinelån: Alt du skal vide

Mere fra HTML.dk

  • Alle snippets 24
  • Artikler 70
  • CSS snippets 13
  • HTML snippets 4
  • jQuery / JavaScript snippets 6
  • Nyheder 14
  • Scripts 1
  • Tutorials 7
  • Uncategorized 1
  • WordPress snippets 1

Kontakt

HTML.dk
Ceres Allé 7
Aarhus C
Skriv til os

Links

Om HTML.dk
Skriv til os!
Send et bidrag
Nyheder
Snippets

Nyt indhold fra HTML.dk

  • Guide: Vælg den rigtige webshop løsning til din webshop!
  • Lækker, responsive modal-popup
  • Få det økonomiske overblik med et regnskabsprogram
  • Sådan skaber du det perfekte hjemmekontor
  • Onlinelån: Alt du skal vide
  • Brug Corona-karantæne fornuftigt: lær mere om kodning og aktier

HTML logo big