LazyLoad Images

Looks for elements that have data-img-src or data-img-srcset.
Data-img-src replaces the src attr for the image or sets a background-image for anything else.
Data-img-srcset creates the srcset attr

How to Use

• Pull in the the partial

  
                [%- partial('/partials/lazy-load') %]
                </body>
                </html>
              

• Html setup for background-image

  
                    <div class="cover" data-img-src="/assets/images/carousel_themes_taste.jpg"> </div>
              

• Html setup for img

  

  
                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
                    data-img-src="/assets/images/carousel_themes_taste.jpg" 
                    data-img-srcset="/assets/images/[email protected]">
                
              

  - OR -

  
                  <picture>
                    <source 
                      media="(min-width: 650px)" 
                      data-img-srcset="images/kitten-stretching.png,
                              images/[email protected] 1.5x,  
                              images/[email protected] 2x">
                    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
                      data-img-src="images/kitten-curled.png" 
                      data-img-srcset="images/[email protected] 1.5x,
                              images/[email protected] 2x"
                      alt="a cute kitten">
                  </picture>
              

• Notes

  • 1. Data-img-srcset does not set background images at this time, it only creates the srcset attr
  • 2. Use a data:image to keep the img src from 404ing and showing a boken image introduction
    • Example: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
    • For images that are dynamicly positioned absolute, like a slider, might need to set the ratio instead of using the 1x1 gif above

  • Aspect Ratio Calculator

    • 1. Fill out height and width in the left column
    • 2. Uncheck 'Round results to the nearst whole number'
    • 3. Add 1 to the width input on the left side and take note of the height thats output
    • 4. Take results to the svg data:uri generator

  • SVG Data:Uri Generator

    • 1. Paste in the info from the Aspect Ratio Calculator
    • 2. Uncheck 'wireframes'
    • 3. Change color to transparent
    • 4. Click 'Make Image'
      • *If theres a boken image icon that means the image is too small, go back to the ratio calcular and switch the '1' from width to the height input and then repeat from step 1
    • 5. Paste the code as the images src
    • 6. Replace 'white' with 'transparent' otherwise white text will apear on the data:uri image