Lazy lädt Thumbnails

Mein Ziel ist es, Thumbnails zu laden. Wie ich hier sehen kann , muss ich class="lazy" hinzufügen, Platzhalter muss in src und Lazy geladenes Bild als data-original .

Dieser Code funktioniert perfekt:

 if ( has_post_thumbnail() ) { $size = 'attachment-thumbnail-400-300'; //Get thumbnail source $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail-400-300' ); $src = $thumb['0']; $placeholder = "//placehold.it/400x300/eee/222/&text=+"; $default_attr = array( 'src' => $placeholder, 'data-original' => $src, 'class' => "lazy $size", ); the_post_thumbnail('thumbnail-400-300', $default_attr); } 

Dies ruft standardmäßig die Quelle und alles ab:

 the_post_thumbnail('thumbnail-400-300'); 

Ich habe versucht, Code auf viele verschiedene Arten zu ändern, aber ich habe es nur mit diesem zu arbeiten:

  $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail-400-300' ); $src = $thumb['0']; 

Es scheint wie eine zusätzliche Anforderung, die ich nicht brauche (ich muss eine Menge Thumbnails laden). Wie the_post_thumbnail ich meinen Code, um src direkt mit the_post_thumbnail und als data-original zuzuweisen?

Solutions Collecting From Web of "Lazy lädt Thumbnails"

Du hast alles was du brauchst, baue einfach dein eigenes img Element so:

 if ( has_post_thumbnail() ) { $class = 'lazy attachment-thumbnail-400-300'; //Get thumbnail source $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail-400-300'); $src = $thumb['0']; $placeholder = "//placehold.it/400x300/eee/222/&text=+"; echo ''; } 

Abgesehen davon besteht Ihr Hauptleistungsproblem darin, jedes Mal einen neuen Platzhalter zu generieren, wenn Sie ein Bild anzeigen möchten. Verwenden Sie dafür eine lokale Datei, die nur ein paar Bytes groß ist, aber Sie diese zusätzliche Anfrage (mit dem ganzen Overhead) speichert.

Wie ändere ich meinen Code, um src direkt mit the_post_thumbnail zu erhalten und als Daten-Original zuzuweisen?

Sie können str_replace und preg_match mit get_the_post_thumbnail verwenden .

 $size = 'attachment-thumbnail-400-300'; $placeholder = 'src="//placehold.it/400x300/eee/222/&text='.urlencode('+').'"'; $pattern = '/src\s*=\s*"(.+?)"/'; $thumb = get_the_post_thumbnail($post->ID , 'thumbnail-400-300'); preg_match($pattern, $thumb, $matches, PREG_OFFSET_CAPTURE); if ( ! empty($matches) ){ $src = $matches[0][0]; $thumb = str_replace( $src, $placeholder, $thumb ); $thumb = str_replace( 'class="', 'class="' . "lazy $size ", $thumb ); $data_original = str_replace( 'src="', 'data-original="', $src ); $thumb = str_replace( ' src="', $data_original . ' src="', $thumb ); } echo $thumb;