0

まず遅延画像を含むオープンngbPopover:私は、問題を表示するためにplunkrを作成:http://plnkr.co/edit/5IhhqtofCvqqr5x9P0De?p=previewAngular2:ホバー上のすべての

私は(画像付き)ngbPopoverを開きたい要素をホバリングに遅れ。 triggers="manual"と組み合わせて(mouseover)(mouseleave)を使用します。オープニング機能の中で私はsetTimeoutを使用して、ポップオーバの開始をトリガします。すべてうまく動作しますが、最初の実行ではありません。画像上に見られるように、ポップオーバーは間違って配置されています。

秒で

problem showcase

、第三、...すべてが正常に動作ホバー。タイムアウト機能を削除しても機能しますが、それは私の目標ではありません。

答えて

1

これは難しい問題です。回避策を提案する前に(私はそこに「修正」する方法があるとは思えません)、ここで何が起こっているのか説明しましょう。

要素を適切に配置するには、配置する要素のを正確に把握する必要があります。正確なサイズ特定のケースでは、の後に正確なサイズがの場合のみブラウザに画像が表示されます。

作業-周りの問題の2つの基本的な方法があります。

  • 再位置ポップオーバー後の画像はサイズ先行
  • 所与の画像をロードされています。

画像負荷後の再位置決めポップオーバーの問題点は、<img>onloadイベントに耳を傾け、その後、再配置を強制しなければならないということです。これは厄介で、今日のng-bootstrap popoverの実装には再配置を強制する方法はありません(簡単に追加できます)。

代わりに<img>要素の初期サイズを指定すると、画像を読み込む前に正確な寸法を知ることができます。 Ex。 width="200px" height="140px"そうのように:作業を開始する画像物事の固定寸法の

<ng-template #popContent let-greeting="greeting"> 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Crested_Tern_Tasmania_%28edit%29.jpg/1600px-Crested_Tern_Tasmania_%28edit%29.jpg" 
width="200px" 
height="140px"> 
</ng-template> 

期待通り:http://plnkr.co/edit/QUxBX1KCPVaAkIfBH0P8?p=preview

関連する問題