問題タブ [webpage-rendering]

DOM の準備ができたら (jQuery によって $(document).ready()) jCarousel を初期化するページがありますが、IE 8 では、jCarousel の初期化が完了するまでページは表示されません。Firefox と Chrome では、jCarousel に仕事を任せながら、ページのコンテンツがすぐに表示されます。

DOM が一定時間 (0.5 秒など) 変更されていないことを確認するまで、IE がページ コンテンツを表示しないというのは本当ですか?

(また、setTimeout() を使用して jCarousel の初期化を遅らせました。ページ コンテンツは高速に表示されますが、最終的に初期化が実行されると、IE 8 がフリーズします。ページ スクロールなどのユーザー アクションに応答しないため、適切ではありません。解決策のいずれか)。

ページがサーバーを離れるときにいくつかの要素のテキストを変更したい (page_render、endRequest など)。

ページにアクセスするにはどうすればよいですか? また、値やテキストを変更する要素を見つけるにはどうすればよいですか?

IE8 Developer ツールバーの Quirks モードとは何ですか? Quirks モードと IE8 標準モードでページのレンダリングが異なるのはなぜですか?

情報: JavaScript の知識がありません。なし。

Web ページが完全にロードされたことを判断する方法があるかどうか知りたいです。Webkit を使用してページをレンダリングする (および Webkit の JS エンジンを使用して JS 関数を解析し、DOM などの処理を終了する) クローラーがあるとします。私が行うと考えていること：

1) すべてのスクリプトの実行が終了しました。2) 保留中の AJAX 呼び出しはありません。3) DOM は、現在入手可能な情報に基づいて完全に処理およびロードされます。

より具体的な仮説として、いくつかのサイトのソースを見ると、DOM に何かを挿入するスクリプト タグを使用して広告を読み込み、AJAX 呼び出しを発行して広告を読み込み、入力することがわかります。これらすべてがいつ完了したかをどのように判断できますか?

（例を非同期のものに置き換えてください。上記よりも普遍的なものは考えられませんでした。）

「検出」とは、可能な限りあらゆる方法で行います。たとえば、何かが完了したことを知らせるためにページに何かを書き込む JS コードをページに挿入します。または、たとえば QtWebkit を使用すると、JS は C++ を呼び出すことができるので (私は信じています)、JS スニペットは C++ 関数を呼び出して、ページがいつ「読み込まれた」かを知らせることができます。要するに、機能するものは何でも。

私が持っている現在の「素朴な」実装は、ページをロードした後、座って数秒間待機します。それは愚かです。

回答を理解する前にさらに背景情報が必要な場合は、「これを最初に読んでください」と気軽に言ってください。

どうもありがとうございました！

いいえ。これは無視してください。スペースはブラウザによってそこに置かれます。

これは私のアプリケーションからのHTMLスニペットです：

ご覧のとおり、</a>終了タグの後にスペースが1つあります。ただし、ブラウザでは、アンカー内にスペースが追加されます。したがって、次のようになります。

これは、HTMLを生成するPHPコードです。

私はこれに完全に困惑していて、30分間コードをじっと見つめていても、これを引き起こしている原因を理解できません。

これは、翻訳ファイルの関連部分です。

ご覧のとおり、Zend_Translateによってスペースが追加されることはありません。

問題が何であるかを実際に把握することなく、以前にこの問題に遭遇しましたが、ページのメインコンテンツで画像の境界線を使用して、標準の「ドロップシャドウ」効果を実行しようとしています. コンテンツ部分には青色の背景 (#3366ff) があるため、境界イメージには「ドロップ シャドウ」の前にその色の 1 ピクセルがあります。Chrome (Windows および Mac)、Safari (Mac)、IE8、Firefox (Mac) ではすべて問題なく動作しますが、Windows 版 Firefox では機能しません。以下の画像ですが、Firefox は #3366ff カラーをレンダリングする代わりに #4e50fb をレンダリングします。考え？これはカラープロファイルの問題でしょうか? もしそうなら、どうすればそれを修正できますか？

ありがとう！

悪いレンダリング:

良いレンダリング:

IE7でクァークズモードでレンダリングされるため、表示の問題が発生します。これを確認するには、「document.compatMode」を表示し、「CSS1Compat」ではなく「BackCompat」を取得します。IE8を使用してIE7に戻すと、問題が発生しなくなります。プレーンなIE8では、X-UA-Compatibleヘッダーを使用してレンダリングモードを強制することで修正しましたが、これはIE7では機能しません。他のブラウザーも癖で表示されますが、IEとは異なり、これはそれらを疑似IE5.5モードにしないため、正常にレンダリングされます。

IE7を、癖ではなく標準のレンダリングモードでレンダリングさせるにはどうすればよいですか？DOCTYPEをいくつかの異なるオプションに設定しようとしましたが、xmlプロローグを追加していません。返信をよろしくお願いします。

Safari の chrome で適切にレンダリングされていないように見える Web サイト ページがあります。

他のブラウザーの 2 倍のピクセル数で画面の幅をレンダリングしているようです。Mac の Chrome のバージョンを除いて、Windows と Apple の他のすべてのブラウザで機能する初期ビューポート設定であると思われます。

ビューポート設定を削除しようとしましたが、うまくいかないようです。Chrome の最新バージョンを使用しています。Chrome の横にある Safari でウィンドウを開いていると、同じ幅を占めるにもかかわらず、Chrome が画面を 2 倍の幅でレンダリングしていることがわかります。

おっとっと。画像を投稿することはできませんが、ここで見ることができます: http://straathof.acadnet.ca/test_chrome.jpg

テストしたい場合は、次のページにアクセスしてください: http://straathof.acadnet.ca/reblend55

この問題を追跡するための助けをいただければ幸いです。どこを見たらいいのかわからない。

この質問のために、「効率」とは多かれ少なかれページのレンダリング速度を意味します。ただし、スムーズなスクロールなどのパフォーマンスの問題も考慮する必要があります。

ページに縞模様の背景を配置するとします。効率の観点から、幅 100 ピクセル (10 個のストライプを表示) の画像をタイル化するのと、幅 20 ピクセル (2 つのストライプを表示) の画像をタイル化する方が良いでしょうか? もちろん...大きな画像は読み込みに時間がかかりますが、非常に小さな画像を並べるときに問題が発生したように感じます. 最適なポイントはありますか？

特にこの質問のパート2を考えると、これはブラウザに依存すると思い始めています（おそらくオペレーティングシステムにも依存しますか？）：

半透明性を実現するには、半透明の .png ファイルを並べて表示するか、CSS 不透明度属性を使用する方が効率的ですか (ここでも、大きなタイルと小さなタイルの問題が発生します)。私の経験から、古いバージョンの IE は、タイル化された半透明の .png の方が、CSS の不透明度属性を使用するよりもうまく動作するようです (ただし、科学的なテストは行っていません)。

角の丸みも良い例です。一部のブラウザーでは、CSS 属性や JavaScript 実装の代わりに画像を使用すると、ページがより高速になり、スクロールがよりスムーズになるようです。

これは実際には CSS よりも幅広い問題ですが、最近私が考えていることです。

-ピーター

SolarSentinelJoomlaテンプレートに基づくサイトがあります。www.sism.org

Chromeで視覚化の問題が発生しています。

右側のサイドバーは、すべてのコンテンツの後で下にシフトされますが、右側に浮いているはずです。

誰かが私に理由を説明できますか？

PS：テンプレートcssはかなり乱雑で、ページの最初にインラインで作成されたカスタムcssとjsがいくつかあります。

編集済み