Jak na Lazy Load obrázků ve WordPressu

Lazy load je postup, při kterém načítá vaše webová stránka obrázky až poté, co se mají zobrazit. Výhodné je to při delší stránce, když se má načíst třeba čtyřicet obrázků. Stránka se pak načítá neúměrně dlouho a uživatel může odejít. V tomto článku si ukážeme, jak Lazy load jednoduše použít ve vaší šabloně.

Co budeme potřebovat?

Stačí jQuery, který už stejně většina WordPress šablon používá a jQuery plugin jquery_lazyload, který najdete zde.

1.

Jako první pomocí wp_register_script a wp_enqueue_script načteme jQuery plugin.

2.

V druhém kroku vytvoříme buffer a jeho callback funkci. Zavěsíme do init akce.

add_action('init', 'buffer_start');
function buffer_start() {
   ob_start("my_callback");
}
function my_callback($buffer) {
   return $buffer;
}

3.

V dalším kroku vytvoříme funkci, která projde obsah stránky a nahradí všechny obrázky jednopixelovým gifem. Zároveň přidá do každého obrázku css třídu lazy.
Pokud nevíte, co znamená tento řetěztec:
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
jde právě o postup, jak vytvořit jednopixelový gif. Pro inspiraci odkaz na článek z Css Tricks.

   function content_filter( $content ) {
	$matches = array();
	preg_match_all( '//', $content, $matches );

	$search = array();
	$replace = array();

        foreach ( $matches[0] as $image ) {

	$replace = preg_replace( '/<img(.*?)src=/i',
'<img$1src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-original=', $image );

if ( preg_match( '/class=["\']/i', $replace ) ) {
$replace = preg_replace( '/class=(["\'])(.*?)["\']/i', 'class=$1lazy $2$1', $replace );
} else {
$replace = preg_replace( '/<img/i', '<img class="lazy"', $replace );
    		}

$replace .= '' . $image . '';

array_push( $search, $image );
array_push( $replace, $replace );

        }

$content = str_replace( $search, $replace, $content );

return $content;

   }

4.

Jako poslední vytvoříme funkci pro vyprázdnění bufferu a umístíme ji do wp_head.

add_action('wp_footer', 'buffer_end');
function buffer_end() {
  $content = ob_get_clean();
  echo content_filter($content);
}

A to je vše.
Těším se u dalšího článku.