<h1>Lazy loading s Unveil.js</h1>

<p>Demonstrační příklad k článku <a href="https://www.vzhurudolu.cz/prirucka/lazy-loading">o lazyloadingu</a>.</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+1">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+1" alt="Image">
  </noscript>
</p>

<h2>Nadpis</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quaerat in nesciunt quas explicabo repudiandae fuga laboriosam voluptatibus laborum iure voluptas voluptates blanditiis rem earum obcaecati. Ad tenetur vero laudantium.</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+2">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+2" alt="Image">
  </noscript>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quaerat in nesciunt quas explicabo repudiandae fuga laboriosam voluptatibus laborum iure voluptas voluptates blanditiis rem earum obcaecati. Ad tenetur vero laudantium.</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+3">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+3" alt="Image">
  </noscript>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quaerat in nesciunt quas explicabo repudiandae fuga laboriosam voluptatibus laborum iure voluptas voluptates blanditiis rem earum obcaecati. Ad tenetur vero laudantium.</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+4">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+4" alt="Image">
  </noscript>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quaerat in nesciunt quas explicabo repudiandae fuga laboriosam voluptatibus laborum iure voluptas voluptates blanditiis rem earum obcaecati. Ad tenetur vero laudantium.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi quaerat in nesciunt quas explicabo repudiandae fuga laboriosam voluptatibus laborum iure voluptas voluptates blanditiis rem earum obcaecati. Ad tenetur vero laudantium.</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+5">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+5" alt="Image">
  </noscript>
</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+6">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+6" alt="Image">
  </noscript>
</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+7">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+7" alt="Image">
  </noscript>
</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+8">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+8" alt="Image">
  </noscript>
</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+9">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+9" alt="Image">
  </noscript>
</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+10">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+10" alt="Image">
  </noscript>
</p>

<p>
  <img src="http://www.vzhurudolu.cz/2013/assets/img/empty.png" alt="Image" data-src="http://placehold.it/1000x660&text=Test+11">
  <noscript>
    <img src="http://placehold.it/1000x660&text=Test+11" alt="Image">
  </noscript>
</p>

/* Animace zobrazovani obrazky "fade-outem" */
.js img {
  opacity: 0;
  transition: opacity .3s ease-in;
}

/* Base & layout */

body { margin: 2em 5em; }
img { max-width: 300px; height: auto; }

$(document).ready(function() {
  /* K <html> přidáme třídu .js, abychom v CSS mohli předpřipravit animaci */ 
  $("html").addClass("js");
  
  /* Inicializace Unveil.js s 600px náskokem načítání obrázků */  
  $("img").unveil(500, function() {
    $(this).load(function() {
      this.style.opacity = 1;
    });
  });
});