georgeharito of Efront
5/10/2016 - 12:41 AM

Lazy load on background Images using jquery.

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();
	});