让WooCommerce加载页面上的所有变体图像加载负载

Question

我正在使用 Woocommerce v6.3.1 和 WooCommerce v1.1.19 的变体样本 在我的 Wordpress 网站上显示所有不同的变体。

我注意到它以舒适的速度加载产品页面，但不同属性的图像会进行 ajax 调用并在访问点加载该变体的图像（即单击样本按钮），这有相当大的滞后。然后该图像被缓存，因此该变体的后续访问没有任何加载时间，但我希望在页面加载时加载该初始调用。

我知道我可以对图像进行优化，而且我也这样做了。目前图像的平均大小为 500kb。

有没有办法让所有变体的所有图像在页面加载时加载？如果这些 ajax 调用仍然是异步进行的，那就太好了！

Answer 1

您可以将所有变体图像放入“ IMG”元素中。并通过设置“显示：无”使“ IMG”元素消失。这样，浏览器将在遇到元素后立即开始下载inages，并在下次需要显示时被缓存。您可以在产品循环中执行此操作：

$variations = $product->get_available_variations();
foreach ( $variations as $variation ) {
    echo '<img src="' . $variation['image_src'] . '" style="display:none;">';
}

在循环外，您可以使用此操作：

$product = new WC_Product_Variable( $product_id );