元ページ→Kaizenデザイン案の順番で読み込まれるため、その時間差が長くなることでチラつきが気になることがあります。
そういった場合、以下の方法で軽減出来ることがあります。
1. JS/CSSのコードを少なくする
セレクタやメソッドで編集内容が重複している場合、最下部のコードが適用されます。
適用されていないコードを削除することでデザイン案の軽量化をし、チラつきを軽減出来ることがあります。
2. スタイル編集はJSタブではなく、CSSタブで行う
エディター内で記述したコードはCCSタブの方が先に反映されます。
そのため、スタイルの編集は極力CSSタブで行うことで、チラつきが軽減できます。
3. 使用している画像のファイル容量を小さくする
画像のファイルサイズが大きいと、チラつきが目立ちやすくなります。
ファイルサイズや解像度を、実用上問題ない範囲で、リサイズ・アップロードし、差し替えてみてください。
なお、ファイルサイズを小さくする場合には、画像の不具合での差し戻し にお気をつけください。
4. CSSタブで元ページを非表示にしてから、JSタブでデザイン案を再表示する
元ページ表示→Kaizenデザイン案反映、までの時間差が長くなるほどチラつきが目立ちやすくなります。
そこで、最初に表示される元ページを一旦CSSで非表示にすることで、体感的にチラつきを軽減できます。
以下のいずれかの方法をお試しください。
A. display:none を使う方法
1. まず、CSSタブの1行目でbody全体を display:none にします。
body {
display:none;
}
2. 次に、JavaScriptタブの最終行でbody全体を !important属性 で表示します。
$("body").attr({"style":"display:block!important;"});
このコードで、CSSタブで元ページを全て非表示→JSタブでデザインを全て適用後に再表示、することになります。
B. visibility:hidden を使う方法
元ページの仕様で、高さや幅をJSで取得・制御していることがあります。
そのような場合 display:none を使用すると、表示崩れを起こす原因になります。
そこで代替案として visibility:hidden を使います。
1. まず、CSSタブの1行目でbody全体を visibility:hidden にします。
body {
visibility:hidden;
}
2. 次に、JavaScriptタブの最終行でbody全体を !important属性 で表示します。
$("body").attr({"style":"visibility:visible!important;"});
このコードで、CSSタブで元ページを全て非表示→JSタブでデザインを全て適用後に再表示、することになります。
0 コメント