14

アイデア

私はユーザーマニュアルページを持っています、それはちょっと大きいです、そして各トピックはそれにリンクされたアンカーを持っています。

私の製品ページでは、次のようなアンカーを使用して、クライアントをマニュアルのそのトピックに直接リンクできます。

マニュアル：

<a href="#manage_options">Managing Options</a>
<!-- Instructions on how to manage options -->

製品ページ：

<a href="http://example.com/manual/#!/manage_options">How to Manage Options</a>

問題

製品ページの[オプションの管理方法]リンクをクリックすると、マニュアルに移動し、すぐに#manage_optionsアンカーに移動します

ただし、アンカーに移動するため、間違った場所で停止することがよくあります。その後、画像が読み込まれ続け、コンテンツの位置が変わります。

すべてのコンテンツがロードされるのを待ってから、アンカーに移動することは可能ですか、それともこの問題のより良い解決策ですか？

4

2 に答える 2

5

...画像の読み込みを継続し、コンテンツの位置を変更します

不要な再描画を避けるために、画像サイズを明示的に宣言することをお勧めします。

https://developers.google.com/speed/docs/best-practices/rendering#SpecifyImageDimensions

画像サイズを指定する

概要

すべての画像に幅と高さを指定すると、不要なリフローや再描画の必要がなくなるため、レンダリングが高速になります。

詳細

ブラウザがページをレイアウトするとき、画像などの交換可能な要素の周りを流れることができる必要があります。置き換え不可能な要素をラップする寸法を知っていれば、画像がダウンロードされる前でもページのレンダリングを開始できます。含まれているドキュメントに寸法が指定されていない場合、または指定された寸法が実際の画像の寸法と一致しない場合、画像がダウンロードされたら、ブラウザでリフローと再描画が必要になります。リフローを防ぐには、HTMLタグまたはCSSのいずれかで、すべての画像の幅と高さを指定します。

推奨事項

画像自体の寸法と一致する寸法を指定してください。幅と高さの仕様を使用して、その場で画像を拡大縮小しないでください。画像ファイルが実際に60x60ピクセルである場合は、HTMLまたはCSSでサイズを30x30に設定しないでください。画像を小さくする必要がある場合は、画像エディタで画像を拡大縮小し、それに合わせてサイズを設定します（詳細については、画像の最適化を参照してください）。必ず画像要素またはブロックレベルの親でサイズを指定してください。要素自体、またはブロックレベルの親。親がブロックレベルでない場合、ディメンションは無視されます。直接の親ではない祖先にディメンションを設定しないでください。

したがって、以下を使用します。

<img src="cat.jpg" alt="A Cat" width="360" height="200">

または

<img src="cat.jpg" alt="A Cat" style="width:360px;height:200px;">

...または、外部スタイルシートでサイズを指定することもできますが、一般的に、画像サイズを変えるとそれはより困難になります。これにより、画像が読み込まれるときにコンテンツがシフトしないようになります。

于 2013-03-09T22:20:55.050 に答える
5

JQueryスクリプトを使用して問題を解決できます。これにより、ページが読み込まれた後にアンカーリンクを延期できます。また、20ピクセルのオフセットを追加しました。

$(document).ready(function() {
    if(window.location.hash) {
        $('html, body').animate({
            scrollTop: $(window.location.hash).offset().top - 20
        }, 500);
    }
});
于 2017-12-01T15:08:39.817 に答える