・やりたいこと
SPAで、processed with imgixのresize to fit the dimensions by croppingを使って画像をスムーズに表示させたい。
・問題
以下のプレビュー画面をスマホで見ると、ページ切り替え時に
クロップ前の写真が表示→クロップ後の写真が表示
というように、クロップが遅れて行われ、画面におかしな動きが出てしまいます。(重い時はPCでも見られます)
エディタはこちらです。
これを回避する方法はございますでしょうか。
回答よろしくお願いいたします。
対処療法にしかなりませんが、クロップされるエレメントが表示された時にローダーなどを仕込むのはどうでしょうか？
Bubbleでは画面に表示された時に初めてその内部に入っているエレメントの描画処理が実行されるため、SPAの場合未読み込みのページ部分は呼び出された瞬間から処理開始となります。
そのため、対象ページの読み込み時の初めの数秒にローダーを挟むのが簡単かと。
ローダーを挟まない場合はLoadされていれば処理はされるため、ユーザーに見えないところで読み込んでおく方法はありそうです。
対象のエレメントをBubbleとしては読み込むがcssでdisplay:noneにしておくとか。
この辺りは色々試しながらになると思います。
ありがとうございます！
助かりました