Q&A
>> アラートが出た後でもスクロールやクリックなどのイベントを行なうことが出来ません。
> 一つ質問なのですが、上記のスクロールやクリックのイベントを行うというのは
alert の表示中に行っているのでしょうか？
もっとも、
<script>
$(function(){
alert('レンダリング終了');
});
</script>
は、ただの即時実行関数なのでalertが出た後操作できなかったとしても当たり前なんですけどね…
大量の文字をレンダリングした後に処理をする方法をお聞きしたいです。
通常ならば、
コードの読み取り終了後なら、
lang
1$(function(){ 2 alert('loaded'); 3})
ソースファイルも含めた全ファイルの読み込み終了後なら
lang
1$(window).ready(function(){ 2 alert('loaded'); 3})
という風に書くことで実装できると思うのですが、
ソースファイル内に大量の文字が入っているとうまく動作しないようです。
具体的には
フレームワーク：ruby on rails
で簡略化したhtmlを書くと
lang
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>text</title> 6</head> 7<body> 8 <%= text %> 9 <script> 10 $(function(){ 11 alert('レンダリング終了'); 12 }); 13 </script> 14</body> 15</html>
このような感じで書いているのですが、実際に表示するとアラートが出た後でもスクロールやクリックなどのイベントを行なうことが出来ません。
予想としてはDOM自体は読み込んでいるのが、レンダリングが終了していないからではないかと考えております。
ちなみに、body内の<%= text %>には16万文字くらいの文字が入ります。
テキストのレンダリング終了時の取り方をご存知のかたがいらっしゃったらご教授お願い致します。
回答3件
0
offsetTop,offsetLeft等のプロパティにアクセスした場合、強制的に要素をレンダリングしその結果を返します。
これを利用して、レンダリング後に処理を行うような処理を組めるかもしれません。
JavaScript - Webフロントエンドに従事するお前らはいい加減高頻度イベントとレイアウトとスタイリングの付き合い方を考えろ - Qiita
JavaScript - 仮想DOMに思いを馳せていたらそもそもブラウザのレンダリングがわかってなかった - Qiita
このような感じで書いているのですが、実際に表示するとアラートが出た後でもスクロールやクリックなどのイベントを行なうことが出来ません。
上記のプロパティは、レンダリング終了後に結果を返す必要があるため、それまで処理をブロックします。
このため、上記のプロパティへアクセスした後、該当の処理を行えば解決するかもしれません。
ただ、「レンダリング終了時に処理を行う」のではなく、「レンダリングを終了させてその後に処理を行う」ので、パフォーマンス等を検証する必要があると考えます。
また、ブラウザの内部処理に依存している都合上、ブラウザによっては上手く動作しない可能性があります。
投稿2015/04/19 06:31
総合スコア697
0
アラートが出た後でもスクロールやクリックなどのイベントを行なうことが出来ません。
一つ質問なのですが、上記のスクロールやクリックのイベントを行うというのは
alert の表示中に行っているのでしょうか？
JavaScript はシングルスレッドなので、
alert を表示しているとユーザーの入力待ち状態で止まりますが、それが原因ということではないですか？
投稿2015/04/18 13:17
総合スコア227
Prune masui様
回答遅くなってしまいました！
申し訳ございません！
alertに関してはalertが出てOKを押してアラートウインドウが閉じた後もスクロールやクリックが出来ないです。。。
lucker様
僕の理解不足で大変恐縮なのですが、
$(function(){
alert('レンダリング終了');
})
という文字を読み込むまでにtextを全て読むこむ？（文字列として全部認識する）必要があると思っていたのでalertが出た時は<%= text %>を全て読み込んでいると思っていました。
$(function(){
alert('レンダリング終了');
})
は、即時関数なので、構文解析がそこまで行った段階で実行されます。ドキュメントのレンダリングが終わっていなくても、そこまで行けば実行されてしまいます。
なるほど。。。
ありがとうございます！
0
jQuery使っていいのであれば。
$(document).ready();
を利用してはいかがでしょうか？
http://learn.jquery.com/using-jquery-core/document-ready/
Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
$( document ).ready()内に書かれたコードは、JavaScriptコードでDOMを操作する準備が完了してから１度だけ実行されます。
投稿2015/04/18 12:17
退会済みユーザー
総合スコア0
ご回答ありがとうございます！
ただこれでは、ready()内の処理を行った後も画面のレンダリングを待っているような感じ（スクロールやクリックイベントが効かない）になってしまいました(´；ω；｀)
ready()はDOMの表示が完了した後のはずなので、なんか、別の問題のような気がするんですが…
16万字ですか… 検証してみるか…
PHPで申し訳ないですが、普通に動作しますね。
<?php
$text = "";
for($i=0; $i<16000;$i++){
$text .= "あいうえおかきくけこ<br>";
}
echo <<< EOL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text</title>
<script src="/__com/libraries/jquery-1.11.1/js/jquery-1.11.1.min.js"></script>
<script>
(function($){
$(document).ready(function(){
console.log('レンダリング終了');
$('html,body').animate({scrollTop: $("#hoge").offset().top},'slow');
});
})(jQuery);
</script>
</head>
<body>
{$text}
<input type="button" id="hoge" value="hoge">
</body>
</html>
EOL;
<%= text %>
これ、JavaScriptのテンプレートエンジン使っているなんてオチではないですよね？
検証ありがとうございます！
普通に出来るんですね(´；ω；｀)
javascriptのテンプレートエンジンは使用していません！
railsのみです！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/19 06:38
2015/04/19 06:39