CSSとJSでdivディメンションを動的に設定すると、読み込み時間が長くなるのをどのように補正できますか？

Question

カスタム要素「テーブル」の行に情報を表示するPolymerアプリケーションを作成しています。私は最初に要素を配置するためにポリマーフレックスボックスクラスを使用しています。要素がロードされた後、JSで測定を行い、それに応じてテーブルの要素に幅を割り当てる必要があります。問題は、このような何かを行く：

row 1 
*--------------------* 
|  *-----------*| 
|  | el a || 
|  *-----------*| 
*--------------------* 
row 2 
*--------------------* 
|   *------*| 
|   | el b || 
|   *------*| 
*--------------------* 

行1、行2は、固定幅を持っていますが、エルaまたはbは、任意の幅のものであってもよいです。 el aまたはbの内容にかかわらず、行に含まれるelはすべて同じ幅にする必要があります。したがって、この場合、aが最も広く、el bはその幅をaに合わせて調整する必要があります。

私はポリマーを使用して、scrollWidthをJSで測定する前に要素がロードされていることを確認しています。 querySelectorで取得しようとしたときに、未定義の要素を取得するという問題に直面しましたが、Polymerのasyncを使用してこれを修正しました。私は現代のブラウザでうまく要素をスタイルすることができます。次のコードを考えてみましょう。

attached: { 
    this.async(function() { 
    console.log(Polymer.dom(this.root).querySelector('#a').scrollWidth); 
    console.log(Polymer.dom(this.root).querySelector('#b').scrollWidth); 
    }, 100); 
} 

クロムの現代版はaとbため60PXため100pxにのようなものを返します。私が古いバージョンのchromeやfirefoxのような別のブラウザをテストすると、aとbは、現代のクロムを測定したものよりも5-15px少なくなります。ブラウザーの年齢に関係なく、非同期の時間を十分に長くすると、現代のクロームが返されたものと一致する測定値が最終的に得られることが分かりました。これは、ページにdivが存在し、私がquerySelectorとつかむことができるように見える間に、それはまだ完全な幅ではないように変動しているようです。

測定を行う前に要素が完全にロードされるのにどれくらいの時間がかかるかわかりません。要素がロードされているか、おそらく見過ごされているこれらの要素をスタイリングする別の方法であるかを100％確信できる方法を見つけようとしています。私は測定をして、同じことを何度も連続して測定するのを待っている機能にsetTimeoutを使用して最も成功しました。しかし、それでも時々矛盾していることがあります。時折、bは、ウェブページが表示されるときには、aよりもわずかに幅が狭くなります。

Answer 1

何度も真実であっても、何度もチェックを続ける必要がある場合は、certian反復回数で値が変更されなくなるまで無限にsetTimeoutを使い続けることです。たとえば、タイムアウトが10回続いても同じ場合は、すべてのタイムアウトを停止します。

何かのような...

var count = 0; 
function check() { 
    do_something(); 
    if (same_as_last_time == true) {count++} 
    if (count < 10) setTimeout (check,100); 
} 
setTimeout (check,100); 

これはあなたのデータが表示されている千鳥方法に応じて、乱暴に非効率的で、おそらく効果がない可能性がありますが。

ここでの実際の解決策は、測定ポイントとして変数「.scrollWidth」を使用していることにあります。これはブラウザ間で幅を標準化するためのひどい測定です。これについての詳細はこちらを参照してください。https://stackoverflow.com/a/33672058/3479741

幅を取得し、結果がより一貫しているかどうかを比較する別の方法を使用することをお勧めします。 「よりも一貫している多くの選択肢があります。上記の記事の「scrollWidth」を参照してください。