Lazy load on background Images using jquery.
//In this function I set the path to the background image in a attribute of the div called "data-background"
//You will need to start off by not giving the div a background image in the CSS.
//this function will add the css background image on a div after the div is shown on the screen.
var ll = $('div');
var lh = []
var wscroll = 0;
var wh = $(window).height();
function update_offsets(){
$('div').each(function(){
var x = $(this).offset().top;
lh.push(x);
});
};
function lazy() {
wscroll = $(window).scrollTop();
for(i = 0; i < lh.length; i++){
if(lh[i] <= wscroll + (wh - 200)){
var backgroundImage = $('div').eq(i).attr('data-background');
$('div').eq(i).css('background-image',"url('"+backgroundImage+"')");
};
};
};
// Page Load
update_offsets();
lazy();
$(window).on('scroll',function(){
lazy();
});