title: Lazy loading of images for website to load faster
body: <p>i want that before the actual image gets loaded a spinner should be shown so that my website can load faster</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    window.addEventListener('load', function(){
          var allimages= document.getElementsByTagName('img');
          for (var i=0; i&lt;allimages.length; i++) {
              if (allimages[i].getAttribute('data-src')) {
                  allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
              }
          }
      }, false)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;img src="https://loremflickr.com/400/600" data-src="images/banguet-hall-location-icon.png" class="secEightImg" /&gt;
      &lt;img src="http://www.jettools.com/images/animated_spinner.gif" data-src="images/banguet-hall-location-icon.png" class="secEightImg" /&gt;
  
      &lt;script&gt;
  
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the problem is the actual image is shown two times and instead of spinner a broken image (which is shown when no image is found) is shown first
  please help</p>