Lazy Load

                
                  <!-- regular image -->
                  <img class="lazy bg-light img-fluid" data-lazy-toggle-class="animate-fadein" 
                    data-src="image.jpg" 
                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MjMgNzQyIiAvPg==" 
                    alt="...">
                  
                

                
                  <!-- responsive image, using srcset -->
                  <img class="lazy bg-light img-fluid" data-lazy-toggle-class="animate-fadein" 
                    data-src="image.jpg" 
                    data-srcset="image.jpg 800w, image-2x.jpg 1600w" 
                    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5MjMgNzQyIiAvPg=="
                    alt="...">
                
              

                
                  <!-- iframe / youtube / vimeo -->
                  <iframe width="560" height="315" class="lazy bg-light" data-src="https://www.youtube.com/embed/YXNk4gQCPSY" allowfullscreen></iframe>
                
              

                
                  <!-- Local video -->
                  <video width="560" height="315" class="lazy" controls loop muted autoplay>
                    <source data-src="../demo.files/video/waving/hd0936.mp4" src="../demo.files/video/blanks/blank.mp4" type="video/mp4">
                    <source data-src="../demo.files/video/waving/hd0936.ogg" src="../demo.files/video/blanks/blank.ogv" type="video/ogg">
                  </video>
                
              

                
                  <!-- 
                    Optional: for mobile devices [width < 960px], also add:
                    data-background-image-sm="image-sm.jpg"
                  -->
                  <div class="lazy" data-background-image="image.jpg">
                    ...
                  </div>