Woocommerce

为woocommerce商城添加图片延迟(lazyload)加载功能

LensNews

为woocommerce商城添加图片延迟(lazyload)加载功能wordpress图片延迟加载已经不是稀奇的功能,网上有很多类似的文章,添加相当简单方便,woocommerce缩略图图片延迟加载也很方便的可以实现。

最近一直在开发集成woocommerce的主题,遇到很多问题,都得解决,但国内这方面的资料太少,所以基本上都是在google上找到完美的解决方法。

前提是主题中集成了图片延迟加载功能,网上教程很多。

woocommerce的缩略图修改代码不容易,而且缩略图代码不是在模板中,只好通过程序来添加。WP插件中有专门为woocommerce开发的插件Lazy Load for WooCommerce,使用插件也相当的方便,启用后设置下图片的大小以及默认图片的地址就可以工作,如果不使用插件就把以下代码添加到functions.php中一样完美的工作(代码取自Lazy Load for WooCommerce)。

代码中的“图片地址”修改成你的默认缩略图地址

  1. //为商城添加图片延迟加载
  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.     }
  13. }

这样商城列表中的缩略图都能实现图片延迟加载,好激动又实现了一个实用的功能,来试试吧?

(0)
Loading收藏(119)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 3 条评论,访客:2 条,博主:1 条

  • aunsen
    aunsen 发布于:  回复

    woocommerce最近好火的说

    • 萨龙龙
      萨龙龙 发布于:  回复

      你是不是订阅的远方的雪山文章?一发布文章没多久你就来评论了

      • aunsen
        aunsen 发布于:  回复

        嘿嘿,必须的!