simple lazy load

by Jesse M

HTML

<br />
<p>scroll down<br />&darr;</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="lazy-load" data-src-bg="https://www.xtremediesel.com/mm5/graphics/00000001/2017_secondary_XDP_Apparel.jpg">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="lazy-load" data-src-bg="https://www.xtremediesel.com/mm5/graphics/00000001/2017_secondary_XDP_FuelAdd.jpg">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="lazy-load" data-src-bg="https://www.xtremediesel.com/mm5/graphics/00000001/2017_secondary_XDP_Apparel.jpg">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="lazy-load" data-src-bg="https://www.xtremediesel.com/mm5/graphics/00000001/2017_secondary_XDP_FuelAdd.jpg">
</div>
<br />
<br />
<br />
<br />
<br />
<br />

CSS

p{
  text-align:center;
}

.lazy-load {
  display:block;
  width:100%;
  height:200px;
  border:1px solid #000;
  background-size:cover;
  opacity:0;
  transition:all .5s ease-in-out;
  -o-transition:all .5s ease-in-out;
  -ms-transition:all .5s ease-in-out;
  -moz-transition:all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
}

JavaScript

var bgs = document.querySelectorAll('[data-src-bg]');

$(window).scroll(function() {

	for (var bg of bgs) {
    var top_of_element = $(bg).offset().top;
    var bottom_of_element = $(bg).offset().top + $(bg).outerHeight();
    var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
    var top_of_screen = $(window).scrollTop();
    var imgPath = $(bg).data('src-bg');

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
				$(bg).css('background-image', 'url("' + imgPath + '")').delay(300).css('opacity', '1');
				$(bg).removeAttr('data-src-bg');
    }
	}

});

$(document).ready(function() {

	for (var bg of bgs) {
    var top_of_element = $(bg).offset().top;
    var bottom_of_element = $(bg).offset().top + $(bg).outerHeight();
    var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
    var top_of_screen = $(window).scrollTop();
    var imgPath = $(bg).data('src-bg');

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
				$(bg).css('background-image', 'url("' + imgPath + '")').delay(300).css('opacity', '1');
				$(bg).removeAttr('data-src-bg');
    }
	}

});