話題(スレッド) クライアント関連 のメッセージ

Version 0.6.18~ 文書操作の非同期化 (2014-02-16 12:21, itozyun, #71905)

この版で、X.Dom 以下にある jQuery 風な DOM API 抽象化レイヤーの DOM 更新処理が非同期になった。

つまり、className などの属性や style の変更、要素の追加・削除 などしたときに、実際の HTMLElement への反映は、setTimeout や requestAnimationFrame で一瞬置いた後にまとめて実施される。

ただし、要素のサイズや位置の取得関数が呼ばれた場合はその限りではなく、変更を適用し、そののちに要素の値を返す。( elm.offsetWidth や elm.offsetLeft など )

このような最適化の仕組みは、ブラウザや Adobe Flex の内部で行われている。
それをこのほど、jQuery 風ライブラリでやってみた。

https://sourceforge.jp/projects/pettanr/scm/git/clientJs/commits/7392bd7eff3b3f4877467fc0fcfe480206945fba


さて、その jQuery でサイトの前面にオーバーレイを表示するコードを以下に示す。

$('<div class="black-overlay"></div>').css( 'opacity', 0.5 ).appendTo( document.body );

div.black-overlay という空要素を新たに生成、その要素を 50% で半透過させています。document.body に追加しています。

opacity は IE8 以下では使えませんが、jQuery が filter 指定に置き換えてくれます、そのはずなのですが、、、

実はこのコード、IE8 以下で透過されません。IE では文書ツリーに追加される前に filter 指定が行われると、指定が無視されます。

意図したように動くコードは以下になります。

$('<div class="black-overlay"></div>').appendTo( document.body ).css( 'opacity', 0.5 );

先に文書ツリーに追加した後に、filter がセットされるようにします。

jQuery はクロスブラウザライブラリだといわれますが、クロスブラウザのためにはいろいろ注意が必要です。

一方で、非同期に要素を操作する X.Dom では、以上のような配慮は必要ありません。要素への変更はすべて変数に蓄えられて、一定時間後に、要素の生成 > 文書ツリーへの追加 > style や属性、イベントの適用 の順に一気に行われるからです。

クロスブラウザを謳うライブラリは数あれど、そのクロスブラウザの謂うところは、ライブラリ毎にまちまちで注意が必要なわけです。enjoy!
#71904 への返信

メッセージ #71905 への返信×

ログインしていません。投稿を区別するために投稿者のニックネームをつけてください(ニックネームの一意性は保証されません。全く別の人も同じ名前を利用することが可能ですので本人であることの特定には利用できません。本人であることを保証したい場合にはログインして投稿を行なってください)。 ログインする

話題(スレッド)

クライアント関連 (2012-01-02 20:08, itozyun, #61445)
getAsHTML (2012-01-03 17:24, itozyun, #61453)
RE: getAsHTML (2012-01-03 18:00, yasushiito, #61454)
RE: getAsHTML (2012-01-04 19:53, itozyun, #61478)
RE: getAsHTML (2012-01-05 20:51, itozyun, #61511)
RE: getAsHTML (2012-01-06 07:31, yasushiito, #61517)
getAsJsonString (2012-01-06 08:22, itozyun, #61518)
RE: getAsHTML (2012-01-06 18:20, yasushiito, #61525)
getAsJsonString (2012-01-10 00:53, itozyun, #61565)
RE: getAsJsonString (2012-01-10 17:31, yasushiito, #61574)
RE: getAsJsonString (2012-01-11 07:39, itozyun, #61606)
不具合情報 (2012-01-04 19:58, itozyun, #61479)
operaでも問題なかった 0.2.0 (2012-01-09 22:56, itozyun, #61562)
クロスドメイン (2012-01-10 18:32, yasushiito, #61576)
クロスドメイン (2012-01-10 21:24, itozyun, #61579)
RE: クロスドメイン (2012-01-10 21:54, itozyun, #61582)
RE: クロスドメイン (2012-01-11 07:47, yasushiito, #61608)
RE: クロスドメイン (2012-01-22 19:10, itozyun, #61818)
RE: クロスドメイン (2012-01-23 16:38, yasushiito, #61851)
0.4.x (2012-01-11 07:42, itozyun, #61607)
RE: 0.4.x (2012-01-15 09:06, itozyun, #61703)
RE: 0.4.x (2012-01-19 10:03, itozyun, #61769)
RE: 0.4.x (2012-01-22 19:29, itozyun, #61821)
RE: 0.4.x (2012-01-23 16:49, yasushiito, #61856)
RE: 0.4.x (2012-01-24 09:02, yasushiito, #61875)
漫画OS (2012-01-24 22:00, itozyun, #61888)
RE: 漫画OS (2012-01-25 08:00, yasushiito, #61901)
Webページから画像ギャラリーのイメージは読めない (2012-01-12 07:10, itozyun, #61642)
RE: Webページから画像ギャラリーのイメージは読めない (2012-01-12 07:13, itozyun, #61643)
RE: クライアント関連 (2012-01-13 08:59, yasushiito, #61664)
RE: クライアント関連 (2012-01-15 09:03, itozyun, #61702)
0.4.1 (2012-01-27 13:03, itozyun, #61944)
RE: クライアント関連 (2012-02-05 20:15, itozyun, #62104)
基本ライブラリについて (2012-02-06 10:06, itozyun, #62111)
RE: クライアント関連 (2012-02-18 23:37, itozyun, #62289)
Javascript本 (2012-02-27 19:00, itozyun, #62480)
0.5.x (2012-03-05 21:21, itozyun, #62604)
RE: 0.5.x (2012-03-06 07:53, yasushiito, #62617)
プラグインとかサーバの設定 (2012-03-07 13:25, itozyun, #62636)
RE: プラグインとかサーバの設定 (2012-03-09 18:31, yasushiito, #62692)
RE: プラグインとかサーバの設定 (2012-03-12 08:43, itozyun, #62729)
システム定数 (2012-03-13 22:43, itozyun, #62760)
RE: システム定数 (2012-03-14 07:56, yasushiito, #62762)
RE: システム定数 (2012-03-15 14:00, itozyun, #62790)
RE: システム定数 (2012-03-15 18:43, yasushiito, #62792)
0.4.4 (2012-03-14 21:43, itozyun, #62776)
RE: 0.4.4 (2012-03-15 07:44, yasushiito, #62782)
RE: 0.4.4 (2012-03-15 08:15, itozyun, #62784)
iframeオーバーレイ (2012-03-15 08:52, itozyun, #62785)
MyComics と MyPictures (2012-03-19 20:45, itozyun, #62846)
version0.4.5 (2012-03-25 13:39, itozyun, #62906)
version0.4.6 (2012-03-30 10:35, itozyun, #62982)
RE: version0.4.6 (2012-03-30 17:00, yasushiito, #62985)
RE: version0.4.6 (2012-03-30 22:03, itozyun, #62988)
RE: version0.4.6 (2012-03-31 07:48, yasushiito, #62989)
RE: version0.4.6 (2012-03-31 08:19, itozyun, #62990)
RE: version0.4.6 (2012-03-31 08:45, yasushiito, #62991)
RE: version0.4.6 (2012-03-31 10:29, yasushiito, #62992)
version0.4.7 (2012-03-31 12:35, itozyun, #62994)
RE: version0.4.7 (2012-03-31 13:43, yasushiito, #62995)
version0.4.8 (2012-03-31 16:05, itozyun, #63000)
RE: version0.4.8 (2012-04-01 09:28, yasushiito, #63009)
RE: version0.4.8 (2012-04-01 13:02, itozyun, #63017)
RE: version0.4.7 (2012-03-31 13:49, yasushiito, #62996)
version0.4.9 (2012-03-31 17:52, itozyun, #63003)
RE: クライアント関連 (2012-04-01 10:10, yasushiito, #63010)
コマの投稿 (2012-04-01 12:04, yasushiito, #63015)
RE: コマの投稿 (2012-04-01 12:50, itozyun, #63016)
RE: コマの投稿 (2012-04-01 14:35, itozyun, #63018)
RE: コマの投稿 (2012-04-01 14:48, itozyun, #63019)
RE: コマの投稿 (2012-04-01 16:22, yasushiito, #63020)
RE: コマの投稿 (2012-04-01 16:25, yasushiito, #63021)
RE: コマの投稿 (2012-04-01 16:45, itozyun, #63023)
RE: クライアント関連 (2012-04-01 16:30, yasushiito, #63022)
RE: クライアント関連 (2012-04-01 16:48, itozyun, #63024)
RE: クライアント関連 (2012-04-23 19:19, yasushiito, #63384)
RE: クライアント関連 (2012-04-24 07:49, itozyun, #63389)
RE: クライアント関連 (2012-04-27 07:04, itozyun, #63447)
RE: クライアント関連 (2012-04-27 08:21, yasushiito, #63448)
絵師登録 (2012-04-01 17:21, yasushiito, #63025)
RE: 絵師登録 (2012-04-01 17:49, itozyun, #63028)
RE: 絵師登録 (2012-04-01 19:23, itozyun, #63034)
RE: 絵師登録 (2012-04-02 08:06, itozyun, #63040)
RE: 絵師登録 (2012-04-02 08:59, yasushiito, #63042)
RE: 絵師登録 (2012-04-02 12:40, itozyun, #63044)
RE: 絵師登録 (2012-04-02 20:52, itozyun, #63055)
version0.4.11 (2012-04-01 17:28, itozyun, #63026)
RE: version0.4.11 (2012-04-01 17:39, yasushiito, #63027)
RE: version0.4.11 (2012-04-01 17:50, itozyun, #63029)
version0.4.20 (2012-04-15 17:36, itozyun, #63248)
version0.4.22 (2012-04-18 22:23, itozyun, #63317)
version0.4.23 (2012-04-20 08:41, itozyun, #63357)
version0.4.26 (2012-04-24 21:40, itozyun, #63401)
RE: version0.4.26 (2012-04-25 07:57, yasushiito, #63407)
RE: version0.4.26 (2012-04-25 08:53, itozyun, #63409)
RE: version0.4.26 (2012-04-25 16:25, yasushiito, #63426)
RE: version0.4.26 (2012-04-27 06:58, itozyun, #63446)
version0.4.27 (2012-04-28 06:56, itozyun, #63457)
version0.4.31 (2012-05-15 23:25, itozyun, #63810)
version0.4.32 (2012-05-17 07:01, itozyun, #63834)
RE: version0.4.32 (2012-05-18 08:03, yasushiito, #63851)
RE: version0.4.32 (2012-05-19 16:51, itozyun, #63875)
version0.4.33 (2012-05-19 16:50, itozyun, #63874)
version0.4.34 (2012-05-21 08:19, itozyun, #63927)
RE: クライアント関連 (2012-05-23 19:25, yasushiito, #63977)
RE: クライアント関連 (2012-05-24 05:41, itozyun, #63990)
RE: クライアント関連 (2012-05-24 08:02, yasushiito, #63993)
RE: クライアント関連 (2012-05-24 09:28, itozyun, #63998)
RE: クライアント関連 (2012-05-24 16:48, yasushiito, #64000)
RE: クライアント関連 (2012-05-24 20:56, itozyun, #64003)
RE: クライアント関連 (2012-05-25 07:45, yasushiito, #64011)
RE: クライアント関連 (2012-05-25 08:56, itozyun, #64014)
version0.4.35 (2012-05-28 13:26, itozyun, #64044)
RE: version0.4.35 (2012-05-28 23:24, itozyun, #64053)
0.5.x (2012-07-27 08:48, itozyun, #64774)
version 0.5.1 (2012-07-30 10:51, itozyun, #64807)
RE: 0.5.x (2012-08-02 10:35, itozyun, #64859)
RE: 0.5.x (2012-08-03 23:12, itozyun, #64897)
RE: 0.5.x (2012-08-05 05:03, itozyun, #64923)
0.5.9 (2012-08-19 00:10, itozyun, #65125)
0.5.10 (2012-08-31 13:17, itozyun, #65370)
RE: 0.5.10 (2012-08-31 15:00, itozyun, #65371)
0.5.11 (2012-09-02 16:11, itozyun, #65379)
0.5.12 (2012-09-02 17:56, itozyun, #65382)
0.5.13 (2012-09-07 21:08, itozyun, #65435)
0.5.14 (2012-09-10 09:21, itozyun, #65457)
RE: 0.5.14 (2012-09-11 22:04, itozyun, #65471)
未実装 (2012-09-11 08:50, itozyun, #65464)
未実装メモ (2012-09-11 22:11, itozyun, #65472)
RE: 未実装メモ (2012-10-08 21:53, itozyun, #65789)
RE: 未実装メモ (2012-10-15 23:07, itozyun, #65872)
RE: 未実装メモ (2012-10-17 21:15, itozyun, #65894)
RE: 未実装メモ (2012-10-21 12:21, itozyun, #65910)
RE: 未実装メモ (2012-10-22 09:20, itozyun, #65918)
RE: 未実装メモ (2012-10-22 09:24, itozyun, #65919)
RE: 未実装メモ (2012-10-26 09:19, itozyun, #65982)
RE: 未実装メモ (2012-11-08 09:30, itozyun, #66179)
RE: 未実装メモ (2012-11-08 11:23, yasushiito, #66181)
0.5.15 (2012-09-11 21:50, itozyun, #65469)
0.5.16 (2012-09-14 23:24, itozyun, #65508)
RE: 0.5.16 (2012-09-19 10:50, itozyun, #65549)
0.5.17 (2012-09-24 09:06, itozyun, #65602)
RE: 0.5.17 (2012-09-24 15:10, itozyun, #65609)
version 0.5.18 (2012-11-12 09:08, itozyun, #66249)
version 0.5.21まで (2012-11-16 09:17, itozyun, #66307)
version 0.5.23 まで (2012-11-23 23:10, itozyun, #66381)
RE: version 0.5.23 まで (2012-11-25 12:46, itozyun, #66407)
version 0.5.25 まで (2012-11-30 09:05, itozyun, #66514)
version 0.5.27 まで (2012-12-03 11:21, itozyun, #66540)
version 0.5.30 まで (2012-12-11 09:08, itozyun, #66625)
Input type=file のコントロール (2012-12-13 19:45, itozyun, #66642)
version 0.5.33 まで (2012-12-15 18:51, itozyun, #66663)
version 0.5.37 まで (2013-01-01 11:54, itozyun, #66821)
version 0.5.38 (2013-01-02 23:05, itozyun, #66840)
0.5.39 (2013-01-12 14:12, itozyun, #66942)
0.5.44 (2013-02-02 20:07, itozyun, #67229)
RE: 0.5.44 (2013-02-04 10:22, yasushiito, #67242)
RE: 0.5.44 (2013-02-04 17:34, itozyun, #67247)
0.5.48 (2013-02-28 09:12, itozyun, #67522)
0.5.49 (2013-03-17 21:23, itozyun, #67705)
RE: 0.5.49 (2013-03-18 17:16, yasushiito, #67720)
0.5.50 (2013-03-31 00:19, itozyun, #67944)
0.5.51 (2013-03-31 22:02, itozyun, #67954)
0.5.52 (2013-04-07 18:35, itozyun, #68173)
0.5.54 (2013-05-07 18:26, itozyun, #68640)
0.5.55 (2013-05-07 22:17, itozyun, #68647)
0.5.56 (2013-05-08 07:03, itozyun, #68654)
RE: 0.5.56 (2013-05-08 07:12, yasushiito, #68655)
0.5.57 (2013-05-17 06:50, itozyun, #68777)
version 0.5.4 (2012-08-04 22:03, itozyun, #64915)
version 0.5.5 (2012-08-05 04:59, itozyun, #64922)
RE: クライアント関連 (2012-10-01 18:20, yasushiito, #65693)
RE: クライアント関連 (2012-10-02 08:19, itozyun, #65697)
RE: クライアント関連 (2012-10-02 09:16, itozyun, #65698)
RE: クライアント関連 (2012-10-02 18:51, yasushiito, #65703)
RE: クライアント関連 (2013-05-24 08:09, yasushiito, #68870)
RequireJS (2013-05-26 20:24, itozyun, #68897)
js ファイルを分割して開発 &gt; 一本化 &gt; 圧縮 (2014-10-11 19:17, itozyun, #74577)
Version 0.6.x (2014-02-16 11:51, itozyun, #71904)
Version 0.6.18~ 文書操作の非同期化 (2014-02-16 12:21, itozyun, #71905)
Version 0.6.26 (2014-03-03 21:50, itozyun, #72052)
X.Dom Dom 操作ライブラリを使ったアプリのデモ (2014-04-26 07:14, itozyun, #72806)
X.UI について (2014-03-08 18:41, itozyun, #72085)
Re: X.UI について (2014-06-04 21:11, itozyun, #73299)
Re: X.UI について (2015-05-22 16:03, itozyun, #76190)
X.Net と X.Util の追加 (2014-09-11 21:04, itozyun, #74363)
MouseEvent, TouchEvent の PointerEvent への変換 (2014-09-30 22:33, itozyun, #74489)
Audio 機能の追加 (2014-10-03 20:20, itozyun, #74518)
job にも pettanR ライブラリの一部を導入してみて (2014-10-18 15:21, itozyun, #74624)
Re: Audio 機能の追加 (2014-11-17 22:26, itozyun, #74857)
Re: Audio 機能の追加 (2015-01-15 19:41, itozyun, #75254)
X.Node.Anime の追加 (2014-10-23 21:19, itozyun, #74655)
Re: X.Node.Anime の追加 (2015-01-16 22:22, itozyun, #75259)
X.UI.ScrillBox の追加 (2015-04-16 22:38, itozyun, #75956)
Re: X.UI.ScrillBox の追加 (2015-04-18 15:51, itozyun, #75961)
無限スクロールについて (2015-07-01 09:44, itozyun, #76444)
Opera モバイル12 対応メモ (2014-11-27 14:42, itozyun, #74932)
&lt;a&gt;タグの下に&lt;div&gt;が現れるとエラーになっていた対策 (2014-12-18 22:12, itozyun, #75069)
UIデータバインドとGPUレイヤー (2015-01-12 19:26, itozyun, #75222)
要素への更新を GPU レイヤーが解放されるまで待機する (2015-01-30 18:30, itozyun, #75349)
セレクタの修正 (2015-04-10 12:24, itozyun, #75909)
pettanR フレームワーク API ドキュメント (2015-05-25 22:27, itozyun, #76222)
Re: pettanR フレームワーク API ドキュメント (2015-06-06 15:47, yasushiito, #76282)
Re: pettanR フレームワーク API ドキュメント (2015-06-06 20:12, itozyun, #76283)