<div class="container">

	<div class="row">
    <h1>Demo for the article <a href="https://css-tricks.com/lazy-loading-responsive-adsense-ads" target="_blank">Lazy-Loading Responsive Adsense Ads &rarr;</a></h1>
		<p><span>Resize the browser for responsive ads</span></p>
	</div>

	<div class="row">
		<div class="adsense">
			<ins data-ad-client="ca-pub-4676533344420647" data-ad-slot="5741144487"></ins>
			<p class="adsense__loading"><span>Loading&hellip;</span></p>
		</div>
	</div>

	<div class="row gap"><p>Scroll down to lazy load the other ad &darr;<br /><span>Scroll fast or use web inspector to spot the lazy-load effect.</span></p></div>

	<div class="row">
		<div class="adsense">
			<ins data-ad-client="ca-pub-4676533344420647" data-ad-slot="5741144487"></ins>
			<p class="adsense__loading"><span>Loading&hellip;</span></p>
		</div>
	</div>

</div>

body {
	font-family: Roboto, sans-serif;
	color: #212121;
	background-color: #f5f5f5;
	padding: 2.5rem 1.25rem; /* 40 20 */
}
a {
  text-decoration: none;
  color: currentColor;
}

.container {
	width: 100%;
	max-width: 64em; /* 1024 */
	text-align: center;
	margin: 0 auto;
}
  .container h1 {
    font-size: 1.625em; /* 36 */
    font-weight: 300;
    color: #1268bd;
  }
  .container a { font-weight: 700; }
  .container h1 a:hover,
  .container h1 a:focus { color: #f4b42b; }

  .container p { line-height: 1.6; }
  .container p span { color: #777; }

.row + .row {
	border-top: 1px solid #e1e1e1;
	padding-top: 2.5em; /* 40 */
	margin-top: 2.5em; /* 40 */
}
.gap {
	height: 125em; /* 2000 */
}


/* AD STYLING */

.adsense {
	width: 970px;
	height: 90px;
	background-color: #fff;
	display: block;
	margin: 0 auto;
}
.adsense:before { display: none !important; }
.adsense ins	{ width: 100%; height: 100%; display: block; }

.adsense {
	position: relative;
}
	.adsense__loading {
		width: 100%;
		height: 100%;
		background-color: rgba( 255, 255, 255, .9 );
		display: table;
		position: absolute;
		top: 0;
		left: 0;
	}
	.adsense--loaded .adsense__loading { display: none; }

		.adsense__loading span {
			text-align: center;
			vertical-align: middle;
			display: table-cell;
		}

@media screen and ( max-width: 64em ) /* <= 1024 */
{
	.adsense { width: 728px; height: 90px; }
	.adsense:before	{ content: '1024'; }			
}

@media screen and ( max-width: 50em ) /* <= 800 */
{
	.adsense { width: 468px; height: 60px; }
	.adsense:before	{ content: '800'; }
}

@media screen and ( max-width: 33.75em ) /* <= 540 */
{
	.adsense { width: 336px; height: 280px; }
	.adsense:before	{ content: '540'; }
}

@media screen and ( max-width: 26.25em ) /* <= 420 */
{
	.adsense { width: 250px; height: 250px; }
	.adsense:before	{ content: '420'; }
}

// vanilla
new adsenseLoader( '.adsense',
{
  onLoad: function( ad )
	{
		if( ad.classList )
			ad.classList.add( 'adsense--loaded' ); // IE 10+
		else
			el.className += ' ' + 'adsense--loaded'; // IE 8-9
	}	
});

// jQuery
/* $( '.adsense' ).adsenseLoader(
{
	onLoad: function( $ad )
	{
		$ad.addClass( 'adsense--loaded' );
	}
}); */