EC-CUBE4の商品詳細ページでslickとそのサムネイルそれぞれにデバイスに応じた適切なサイズの画像を表示
ここで言う適切なサイズとはCSS等で指定する見かけ上の大きさのことではなく、画像そのもののファイルサイズを指します。
適切なサイズの画像ファイルに置き換えることで、通信容量およびロード時間を短縮することを目的としています。
また、初期表示では縮小したサムネイル画像を表示、レイアウトが整ったあと目的のサイズの画像に置き換えることで、ページ表示の体感速度の向上も果たします。
1. 商品詳細画面を表示する際、slickとサムネイルには縮小した商品画像を表示しておき、ローディングが完了してレイアウトが整うまでの時間を短縮。
2. ページデータのロードが完了した時点で、あらためてslickに表示済みの小サイズの画像をデバイスに合わせたサイズの画像ファイルに差し替える。
あらかじめこちらの対応を使用してEC-CUBEの html/upload/save_image/ ディレクトリに対して自動サムネイル生成が使用できる状態にしておく必要があります。
上記対応をしていない場合は、あらかじめ個別にサムネイル画像を用意しておき、以下の対応もそれに合わせて変更する必要があります。
EC-CUBE4管理画面の コンテンツ管理 > ページ管理 > 商品詳細ページ より、detail.twig に以下の変更を行います。
{% block javascript %} という行が一箇所あるので、その行のあとに続けて
<script>
//---- スライダー実画像遅延表示
{
window.addEventListener('load', function() {
const images = document.querySelectorAll('img[data-originalsize]');
for(let i in images) {
const image = images[i];
if(typeof image !== 'object') continue;
const ls = Math.max(image.width, image.height);
const originalSize = image.dataset.originalsize;
const qs = originalSize.split('?');
if(typeof qs[1] !== 'undefined') {
if(/t=\d+/.test(qs[1])) qs[1] = qs[1].replace(/t=\d+/, 't=' + ls);
else qs[1] += '&t=' + ls;
}
else qs[1] = 't=' + ls;
image.setAttribute('src', qs.join('?'));
}
});
}
//---- スライダー実画像遅延表示 ここまで
</script>
を追記。
同じく detail.twig 内
<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>
<div class="item_nav">
{% for ProductImage in Product.ProductImage %}
<div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% endfor %}
</div>
を
<div class="item_visual">
{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}?t=100&p" data-originalsize="{{ asset(ProductImage, 'save_image') }}?p"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}
</div>
<div class="item_nav">
{% for ProductImage in Product.ProductImage %}
<div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}?t=100&p"></div>
{% endfor %}
</div>
に変更。
(青字部分を追記)
前提の項目で設置した thumbnail.php 内の
$resizeList = [50,100,150,200,250,300];
を
$resizeList = [50,100,150,200,250,300,400,500];
に変更。
サーバ上には各商品画像に対してそれぞれ画像サイズに応じたキャッシュファイルが作成されますので、サーバのディスク容量に余裕がない場合はご注意ください。