title: use blurry-image-load with several images
body: <p>I have an issue with this plugin <a href="https://github.com/tushariscoolster/blurry-image-load" rel="nofollow">blurry-image-load</a>, because it only allows me to display an image due to absolute positioning with styles, for example if I want to put two pictures one beside the other using a model 12 columns of bootstrap It happens that an image is positioned above the other. </p>
  
  <p>How I can control the positioning?</p>
  
  <p>I made a script with this refered example
  <a href="https://plnkr.co/edit/931AzFwG5DI52p34A3Nz?p=preview" rel="nofollow">https://plnkr.co/edit/931AzFwG5DI52p34A3Nz?p=preview</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="col-md-6"&gt;        
      &lt;div class="placeholder" data-large="https://unsplash.it/600/450?image=1010"&gt;
        &lt;img src="https://unsplash.it/20/15?image=1010" class="img-small"&gt;
        &lt;div style="padding-bottom: 66.6%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-6"&gt;
      &lt;div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg"&gt;
        &lt;img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small"&gt;
        &lt;div style="padding-bottom: 66.6%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.placeholder {
    background-color: #f6f6f6;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }
  
  .placeholder img {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;
  }
  
  .placeholder img.loaded {
    opacity: 1;
  }
  
  .img-small {
    filter: blur(50px);
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>window.onload = function() {
  
    var placeholder = document.querySelector('.placeholder'),
        small = placeholder.querySelector('.img-small')
  
    // 1: load small image and show it
    var img = new Image();
    img.src = small.src;
    img.onload = function () {
     small.classList.add('loaded');
    };
  
    // 2: load large image
    var imgLarge = new Image();
    imgLarge.src = placeholder.dataset.large; 
    imgLarge.onload = function () {
      imgLarge.classList.add('loaded');
    };
    placeholder.appendChild(imgLarge);
  }
  </code></pre>