Custom lazy load in jQuery

by Faisal Khan Janjua

HTML

<div>
  <h6>This is heading</h6>
  <h5>This is heading</h5>
  <h4>This is heading</h4>
  <h3>This is heading</h3>
  <h2>This is heading</h2>
  <h1>This is heading</h1>
</div>

<div class="main-wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.main-wrapper {
  margin: 20px 0;
  padding: 10px;
  border: 1px solid #F00;
}
.main-wrapper::after {
  clear: both;
  content: '';
  display: table;
}
.item {
  float: left;
  width: 50%;
  height: 100px;
  margin-bottom: 10px;
  border: 1px solid #F00;
}

JavaScript

$(document).ready(function(){
	console.log($('body').height());
	console.log($('.main-wrapper').outerHeight());
});