フォローする

デザイン案反映に時間がかかると感じる時の対処法

 

概要

プレビューやラウンドでデザイン案を確認時、元ページ→Kaizenデザイン案の順番で読み込まれるため、その時間差が長くなることでチラつきが気になることがあります。
そういった場合、以下の方法で軽減出来る可能性があります。

 

 

1. JS/CSSのコードを少なくする

セレクタやメソッドで編集内容が重複している場合、最終的には最下部のコードが適用されます。
最終的には上書きされてしまい不要となる、手前のコードを削除することでデザイン案の軽量化をし、チラつきを軽減出来ることがあります。

また、このコードの重複は、エディターよりコンテクストメニューを用いてデザイン案編集を行なった場合に起こりやすいです。
コンテクストメニューを用いた場合でも、必ずJavaScriptタブを確認し、不要なコードがあれば削除しましょう。

 

 

2. スタイル編集はJSタブではなく、CSSタブで行う

エディター内で記述したコードはCCSタブの方が先に反映されます。
そのため、CSSタブの内容 → JavaScriptタブの内容 と実行され、どちらにもCSSの記述があった場合、段階的にCSSが適用されているように見えてしまうことがあります。
スタイルの編集は極力CSSタブで行うことで、チラつきが軽減できます。

 

3. 使用している画像のファイル容量を小さくする

画像のファイルサイズが大きいと、チラつきが目立ちやすくなります。
ファイルサイズや解像度を、実用上問題ない範囲で、リサイズ・アップロードし、差し替えてみてください。
なお、ファイルサイズを小さくする場合には、画質の劣化による差し戻し にお気をつけください。

 

4.JavaScriptタブにて全てのCSSの反映を行う

ページ内の他のファイルの影響等で、JavaScriptタブの内容の反映が極端に遅い場合、CSSタブの内容 → JavaScriptタブの内容 と実行される際に、段階的に変更が行われ、一瞬崩れがあるように見えてしまうことがあります。
この場合は、CSSタブを使わず、JavaScriptタブのみでCSSの反映まで行うことで、解決できる可能性があります。
JavaScriptタブにて、要素の移動など、CSS以外の変更を記述した後、最下部にて、下記のコードでCSSを反映してみてください。
//エディターJavaScriptタブ: ↑ここより上に、CSS以外の変更を記述↑

var s = "\
/* ここにCSSを記述 改行する場合はバックスラッシュを忘れずに入れてください */\
body { color: #000; }\
";

var st = $('<style type="text/css"></style>');
var ss = st.prop('styleSheet');
if(ss) ss.cssText = s;
else st.html(s);
$('head').append(st);

※JavaScriptコードは一例です。より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。

 

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

記事コメントは受け付けていません。