The not-lazy-load ad loader needs to wait until jQuery.dfp is available

[benlk]

Problem

This line of code:

doubleclick-for-wp/inc/class-doubleclick.php

Lines 210 to 212 in bf4fcb5

	<script type="text/javascript">
	jQuery('.dfw-unit:not(.dfw-lazy-load)').dfp( window.dfw );
	</script>

Can potentially be output upon the page before the script enqueues that load the js:

doubleclick-for-wp/inc/class-doubleclick.php

Lines 180 to 181 in bf4fcb5

	wp_localize_script( 'jquery.dfw.js', 'dfw', $data );
	wp_enqueue_script( 'jquery.dfw.js' );

On one site in recent memory, the normal code output on the page was thus:

<script type='text/javascript' src='https://example.org/wp-content/plugins/doubleclick-for-wp/js/vendor/jquery.dfp.js/jquery.dfp.min.js?ver=0.3.0'></script>
<script type='text/javascript'>
	/* <![CDATA[ */
		var dfw = { /* snip */};
	/* ]]> */
</script>
<script type='text/javascript' src='https://example.org/wp-content/plugins/doubleclick-for-wp/js/jquery.dfw.js?ver=0.3.0'></script>
<script type="text/javascript">
	jQuery('.dfw-unit:not(.dfw-lazy-load)').dfp( window.dfw );
</script>

but when that site loaded the https://wordpress.org/plugins/autoptimize/ plugin, the call to jQuery().dfp(); came before the concatenated scripts were loaded on the page.

Solution

• move that code into jquery.dfw.js code

  doubleclick-for-wp/js/jquery.dfw.js

  Lines 45 to 53 in f73e00d

  	$( document ).ready(function(){
  	// Watch for scroll events, and determine whether any ads
  	// need lazy loading. Wait a few seconds for images and text to render
  	// and units to reach their "true" depth on the page.
  	$( window ).on( 'scroll', lazyLoad );
  	// Run lazyLoad once on DOM ready to load any ads in view
  	lazyLoad();
  	});

• use asynchronous loading https://stackoverflow.com/a/8618519