使用Native Lazy Loading顯示WordPress文章圖片

Display Images With Native Lazy Loading In WordPress.jpg

更新

WordPress5.5版在2020年8月11日公佈,裡面內建了圖片Lazy-loading功能,且此設定預設為開啟,因此並不需要再手動修改程式碼,此版本也首次將Sitemap變成內建功能。詳細內容請見〈WordPress 5.5 Field Guide〉Native Lazy Loading Responsive Images in WordPress

來吧,複製貼上

function custom_the_post_thumbnail($image_id){
	$image_url = wp_get_attachment_url($image_id);
	$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', TRUE);
	$image_srcset = wp_get_attachment_image_srcset($image_id);
	$return = '<img class="w-100" src="'.$image_url.'" srcset="'.$image_srcset.'" loading="lazy" alt="'.$image_alt.'">';
	echo $return;
}

範例應用

while ( have_posts() ) {
  the_post();
  $image_id = get_post_thumbnail_id(); ?>
  <div class="">
    <?php custom_the_post_thumbnail($image_id); ?>
  </div>
  <?php
}

搭載商業思維的資料科學家,工業設計系畢業,曾任職知名品牌行銷企劃。下班後寫機器學習模型,寫網站,也寫文章。興趣是把Side Project當成創業題目來玩,把人生當成遊戲破關。