商品詳細ページから戻るときにクーポン画像が一瞬大きく表示される

Question

タイトルどおりですが弊社ページについてCSS？のタグをうまく入れられてないと思うのですが、
症状がでます。よければソースを見ていただきご指南ください。

Answer

ECマスターズの北原です。>タイトルどおりですが弊社ページについてCSS？のタグをうまく入れられてないと思うのですが、症状がでます。よければソースを見ていただきご指南ください。該当箇所では、画像スライドショーをするためにslick.jsを使われているかと思います。slick.jsは読み込みが遅く、読み込まれるまで画像サイズが大きく表示されてしまい読み込み後、適した画像サイズに変更されます。解決策としてslick.jsが読み込まれるまで、画像を完全に透過し読み込まれた後、画像の透過をなくすという方法があります。cssのみで実現できますので下記の記事を参考にお試しください。参考記事https://teratail.com/questions/241341参考コードhttps://codepen.io/shgtkshruch/pen/poJgLLgまた、商品ページ内の<iframe>で呼び出される部分が同じ挙動をしていましたが、同じ方法で解決できるかと思います。

Answer

ご回答ありがとうございます。早速試してみます。結果ご報告させていただきます。

Answer

こちらの件について、slick.jsを用いた部分は問題解消しました。ありがとうございました。恐れ入ります、下層ページ（カテゴリページ、商品詳細ページ）に、ウルトラASPの「手間なしイベントバナー」を実装して掲載しているのですが、この部分も同じ現象が発生しています。jsの読み込みの関係か、ページ見込み時に一瞬画像が大きく表示されてしまいます。https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/↓クーポンの下の部分です。https://gyazo.com/c2ea5ce1709b9c4bdd60f75ae975ec46こちらは、紐づけるクラスが無いのでslick.jsの場合と同じ方法が使えません。解消する方法はございますでしょうか。

Answer

ECマスターズの土屋です。いただいたご質問に付きましては、別のフォーラムにて、引き続き回答させていただいております。お手数ですが、下記URLよりご参照くださいませ。https://forum.ec-masters.net/post_view.php?id=22868

商品詳細ページから戻るときにクーポン画像が一瞬大きく表示される

カテゴリーから探す