- ベストアンサー
特定のDOM読込時のload()処理について
- 特定のDOM読込時に発生するload()処理について、問題が生じています。
- HTMLのbody終了タグ前に記述されたdiv#tooltipが読み込まれず、意味のない状態になっています。load()処理が機能しない原因を解決する方法をご教示ください。
- jQueryを使用しているため、ボタンクリック時にツールチップの内容が読み込まれ、fadeInのアニメーションが起こるような仕組みとなっています。しかし、loadingのアイコンが表示されたままの状態が続いています。
- webama_fk
- お礼率91% (117/128)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No1です。 ＞画像サイズが大きい場合に”読み込んでいます”ということが ＞判るようにローディング画像を表示するということです。 画像に限定してよければ、対象となる画像のロード状況をチェックしてＯＫか見ればよいと思いますので、completeで取れるのではないかとテストしてみましたが、どうもFirefoxがcompleteに対応していないみたいですね。 ＭＤＮの説明ではHTML5ならＯＫという風に読めるのですが、テストしてみるとどうもダメっぽい。 https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement しかたがないので、画像のプレロードと同様に対象画像を再読込してオンロードイベントを数えて読み込みをチェックしてみたところ、Operaでは読込めない場合てもイベントが発生してしまうようでした。 そこで、オンロードの中でさらにcompleteを確認してみることにしたところ、今度はＩＥでイベント直後はcompleteがfalseになるという始末。それなので、さらにタイムラグをつけてcompleteを判定するということに。 全部のブラウザで確認したわけではないので、これでよいのか不明ですし、もっと効率の良い方法がありそうな気がしますが、ひとつのご参考までに。 （DTDは4.01strictで確認） numが0になっていれば読込み終了ということになりますが、uriを間違えていたり何らかの理由で読込めなかったりすると、ずっと0にはなりませんので、時間を区切ってクリアしてあげる必要があるかと思います。（画像が1枚だけならも少し簡単になるかも） いっそのこと、window.onloadのタイミングでフラグをたてるようにした方がわかりやすくて簡単かも知れませんね。 var imgs = $("#tooltip img"); var num = imgs.length; imgs.each(function(){ var img = new Image(); img.onload = check(img); img.src = this.src; }); function check(g){ return function(){ setTimeout(function(){if(g.complete) num--;}, 5); } }
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
ご質問文の例示だけではよくわかりませんが・・・ 「ボタンエリア」は変数名？、 「loadimg」、「ttip」にはjQueryオブジェクトが代入されている？ とりあえず、そのように仮定して、 ＞$("div#tooltip").load(function(){～～ で、何をしたいのか不明です。 ajaxで外部からデータを読込むのであれば、同じload()でも構文が違うでしょうし、loadイベントを設定したいのであれば、divが対象とはならないでしょう。 http://api.jquery.com/load-event/ http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents ajaxを行なうつもりでないのでしたら、その構文はイベントを設定しているだけなので、仮に正しく動作していたとしてもloadイベントが発生しない限り何も起きません。 また、クリックする毎にloadイベントを設定してしまうので、想定とは違うことになるのではないでしょうか。（イベントがダブって設定される）
お礼
ご返信ありがとうございます。 わかりづらい記述で大変申し訳ありません。 仮定されている箇所は、その認識で間違いございません。 ＞＞$("div#tooltip").load(function(){～～ ＞で、何をしたいのか不明です。 実現したいことは、ボタンをクリックして浮き出るツールチップ上に テキストや画像などが入ってきますので、画像サイズが大きい場合に ”読み込んでいます”ということが判るようにローディング画像を 表示するということです。 ＞loadイベントを設定したいのであれば、divが対象とはならないでしょう。 あ、やはりこういう使い方ができないんですね。 ご丁寧にありがとうございます。
お礼
ご丁寧にサンプルまでご提示頂きありがとうございます！ 大変勉強になりました！！！