為WooCommerce商城添加圖片延遲(lazyload)加載功能

WordPress 圖片延遲加載已經不是稀奇的功能，網上有很多類似的文章，添加相當簡單方便，WooCommerce 縮略圖圖片延遲加載也很方便的可以實現。

最近一直在開發集成 WooCommerce 的主題，遇到很多問題，都得解決，但國內這方面的資料太少，所以基本上都是在 google 上找到完美的解決方法。

前提是主題中集成了圖片延遲加載功能，網上教程很多。

WooCommerce 的縮略圖修改代碼不容易，而且縮略圖代碼不是在模板中，只好通過程序來添加。 WP 插件中有專門為 WooCommerce 開發的插件 Lazy Load for WooCommerce，使用插件也相當的方便，啓用後設置下圖片的大小以及默認圖片的地址就可以工作，如果不使用插件就把以下代碼添加到 functions.php 中一樣完美的工作 （代碼取自 Lazy Load for WooCommerce） 。

代碼中的 「圖片地址」 修改成你的默認縮略圖地址

  2. if (!function_exists('WooCommerce_template_loop_product_thumbnail')) {
  3.     function WooCommerce_template_loop_product_thumbnail() {
  4.         $llwoo_image_src = wp_get_attachment_image_src(get_post_thumbnail_id(), 'shop_catalog');
  5.         $llwoo_placeholder = '圖片地址';
  6.         $llwoo_placeholder_fallback = WooCommerce_placeholder_img_src();
  7.         if (!emptyempty($llwoo_placeholder)) {
  8.             echo '<img src="' . $llwoo_placeholder . '" data-original="' . $llwoo_image_src[0] . '">';//默認圖片不為空，則輸出
  9.         } else {
  10.             echo '<img src="' . $llwoo_placeholder_fallback . '" data-original="' . $llwoo_image_src[0] . '">';//如果默認圖片為空，則輸出 WooCommerce 默認的縮略圖
  11.         }
  12.     }
  14. }

這樣商城列表中的縮略圖都能實現圖片延遲加載，好激動又實現了一個實用的功能，來試試吧？