Q&A
http://js.studio-kingdom.com/jqueryui/widgets/dialog jQueryのdialogってjQueryUIのこれですよね？ここでは特にダイアログのドラッグが遅いと感じないので、原因はコンテンツかその他のjs部分にあるかと思います。もっと他のコードやHTML部分を開示してください。
javaでjQueryを使用してdialogを表示させています。
表示はされるのですが、ダイアログを動かそうとした時に、
なんというかすごい動きが鈍いです。
カクカク動くというか・・・、ずっとクリックしたままじゃなくてもカーソルについていこうとしたりとか。。。
なめらかには全然動きません。
特に特別なことはさせておらず、
javascript
1$(html).dialog(options);
のような形でダイアログを表示させています。
optionsにはwidthやheightの設定しかしてないです。
ネットの情報を参考にはしていますが、特に変わった箇所も見当たりません。
同じような経験された方いませんでしょうか？
--追記
どうやら、縦の動きが弱いような気がします。
横はある程度なめらかなのですが。。
--追記
作りとしては、iframeの内容をdialogで表示しようとしています。
javascript
1html = "<iframe src='" + url + "' id='" + id + "' frameborder='0' scrolling='auto'>"; 2$(html).dialog(options);
すいません、その他の部分となると難しいです。。ただ、モーダルダイアログなんですが、提示して頂いたサイトでもモーダルダイアログはグルグルウィンドウを動かしてると、多少鈍りますよね？それがひどくなったような状態なんです。
回答1件
0
ベストアンサー
iframeで表示しているコンテンツのボリュームによりけりですが、動的に動かせるダイアログということは、ドラッグしている間要素を再描画し続けるということにほかならないため、重いのはしょうがないかと思います。試しに「こんにちは」程度しか書いていないページをiframeに読み込ませて動作速度を確認してみてください。
また、質問で提示したjQueryUIのdialogのページですが、私のPCでは遅れを感じないため、dialogの性質ではなくPCスペックによりけりということになるかと思います。
投稿2017/02/23 02:44
総合スコア9206
回答ありがとうございます。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>HTML 文書のサンプル</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
これぐらいの内容のものでも、動作は遅いですね。。。
スペックはちょっと試せれてないですが。
使用しているブラウザはなんですか？
firefox 50.0
IE 10
になります。
firefoxは微妙に古いですし、IEに至ってはメジャーバージョンすら古いですね… http://peacekeeper.futuremark.com/ これでブラウザ動作のスペックが測れます。Test your browser GOというボタンをクリックしてください。5分くらいで結果が分かります。
私はChromeで4627でした。もし同等の数値が出たのにダイアログの動作が重いと感じるなら、なにかスペック以外に問題があるかもしれません。
数値どころかtime outで最後までいかなかったですね。。。
環境の問題な気がしてきました。
うーむ…さすがにそれは環境の問題がかなり大きそうですね。もしかしてOSもVistaとか古い世代のものですか？
いえ、OSは７です。
ちなみに、iframeとかではなく。
divの内容を表示するとかであれば動きは早かったです。
ではiframeではなく、ajaxでコンテンツを取ってきてdivにinnerHTMLとしてぶち込んではどうでしょうか。
まだ提案して頂いた内容は試せてはないんですが。
今まではjsファイルに定義していたメソッドを呼び出して、そこでモーダルダイアログを表示していましたが。
そこを通さずにダイアログを表示すると、同じページでもスムーズに動いちゃいました。。。
完全に何かロジックミスですね。。。
ここではロジックを出すのは憚られるので、こればっかりは自分で調査するしかなさそうです。。。
dialogにオプションを加えているのですが。
open = function() {
$(this).css("width", 画面のwidth - 100);
$(this).css("height", 画面のheight - 5);
};
というのを、オプションにいれるとがたがたしてしまいますね。。
openじゃなくてcreateでやってはどうでしょう。openだと表示物が出来上がったあとに調整するので無駄に計算が増えると思います。createならおそらく表示物を作る前にサイズ調整が先に走ると思うので、多少軽くなるのではないでしょうか。
createでは、おそらくうまくサイズ調整が入らなったのか、iframe内のコンテンツが表示されませんでしたね。。。
うーん、他にできそうなことはぱっと思いつかないので、ご自身で色々検証お願いします。
すいません、長々とやりとりありがとうございます。
あなたの回答
tips
プレビュー
