Blogroll

How to Prep a WordPress Post for my Lean Lazy Loader Script

Posted: October 19, 2013 | Author: | Filed under: PHP | Comments Off on How to Prep a WordPress Post for my Lean Lazy Loader Script

In an earlier post, I described how I wrote a Lean Lazy Loader script to speed up page load times for a page with many images. That script required that the source attribute for IMG tags be set to a generic blank.gif image and it required the images to have a data-lsrc attribute set to the real SRC of the image. Keep in mind that my usage of this script not for the main posts on the page. I don’t know if the google bot will frown upon your usage of blank.gif on all your images so you have been advised of this potential drawback.

In any case, I am getting my blog post data from WordPress. I begin by doing a single random post query: $my_query = new WP_Query('showposts=1&orderby=rand');

Then being a WordPress loop: while($my_query->have_posts()): $my_query->the_post();
Within the loop, I do some HTML work to separate the title from the post. The next step is important! Have WordPress run short codes on the post body first. If you do not run the short codes then your post will be very difficult to clean up. The code so far is below:

<?php
$my_query = new WP_Query('showposts=1&orderby=rand');
	while($my_query->have_posts()): $my_query->the_post();

?>
<div id="post-title"><h1><?php the_title(); ?></h1></div>
<div id="post"><?php 
$ct = do_shortcode(get_the_content());
$a = modSRC($ct); 
echo $a;
?></div>
<?php endwhile; ?>

Now, modify your img tags with PHP. Create a DOM document and filter on IMG nodes. Then on each IMG node set the data-lsrc = src and src = blank.gif and you’re set to run the LLL script on this post. The code for the DOM manipulation is below:

libxml_use_internal_errors(true);  //I did not set any event handlers for DOM parsing errors
		$dom = new DOMDocument;
		$dom->loadHTML($content, LIBXML_NOWARNING); // errors will show but not warnings
		libxml_clear_errors();

//iterate through each IMG tag
		foreach ($dom->getElementsByTagName('img') as $tag) {
			$tag->setAttribute('data-lsrc',$tag->getAttribute('src'));
			$tag->setAttribute('src','../blank.gif');
			$tag->setAttribute('alt',$tag->getAttribute('title'));

		}

I did an additional step of having A tags set to a colorbox class.  The colorbox is just to make clicking on an image nicer for the user.

		foreach ($dom->getElementsByTagName('a') as $tag) {
			$tag->setAttribute('class','colorbox');
		}

The last step is just a bit of clean up.  The $html_fragment produced by $dom-saveHTML() includes a <!DOCTYPE > declaration which I don’t need.  It also prepends <html> and <body> tags to the result which I also don’t need.

		$html_fragment = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
		$html_fragment = str_replace('Â', '', $html_fragment);

		return $html_fragment;

If you scroll back up to the first code snippet you’ll see an echo statement in PHP to output the results to the user.  Combining these scripts I now have a lazy loading of images from WordPress! Not bad.