[![为woocommerce商城添加图片延迟(lazyload)加载功能](https://pic.salongweb.com/2015/06/woocommerce-lazyload.jpg)](https://pic.salongweb.com/2015/06/woocommerce-lazyload.jpg "为woocommerce商城添加图片延迟(lazyload)加载功能")wordpress图片延迟加载已经不是稀奇的功能，网上有很多类似的文章，添加相当简单方便，woocommerce缩略图图片延迟加载也很方便的可以实现。

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

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

woocommerce的缩略图修改代码不容易，而且缩略图代码不是在模板中，只好通过程序来添加。WP插件中有专门为woocommerce开发的插件[Lazy Load for WooCommerce](https://wordpress.org/plugins/lazyload-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. 
14. }

\[successbox\]这样商城列表中的缩略图都能实现图片延迟加载，好激动又实现了一个实用的功能，来试试吧？\[/successbox\]