web-dev-qa-db-ja.com

＃id-IDを持つURLは最初に全ページを表示し、次に#idに移動します

Chromeの新しいバージョン、ie9および10でこれに気付きました。

フォトギャラリーの一部のURLには、写真の完全なビューを表示することになっているため、＃idタグがあります。基本的に、ページの下位にあるdivには、a.com/1.html＃idを介して呼び出す#idがあります。

これは、少し遅れに気づいた最近まで問題になりませんでした。

問題： Webサイトは正常にロードされ、ビューは想定どおり#idに移動しますが、おそらく画像の高解像度のために多少の遅れがあります。

とにかくこれを回避するか、ページが完全にロードされる前でも正しい#idに移動するようにしますか？

htmlgoogle-chromeinternet-explorer-9
5
riseagainst

IDを使用したアンカーはhtml4の機能です そのうちの多くの新しいブラウザーがサポートしようとしていますが、実際にはIDはアンカー名のように動作します。

Id属性を使用して、任意の要素（A要素を含む）の開始タグにアンカーを作成できます。

同じ文書で言う：

Id属性とname属性は同じ名前空間を共有します。これは、同じドキュメントで同じ名前のアンカーを両方とも定義できないことを意味します。両方の属性を使用して、A、APPLET、FORM、FRAME、IFRAME、IMG、およびMAP要素の要素の一意の識別子を指定することができます。単一の要素で両方の属性を使用する場合、それらの値は同一でなければなりません。

すべてのアンカー名を含む名前空間テーブルを構築する必要があるため、すべての要素、したがってページ全体をロードしてから特定のリンクにジャンプする必要があります。 JavaScriptのように、コードが機能する前にロードする必要があります。

ページの読み込みが完了する前にブラウザをそのリンクにジャンプさせる方法はありません。そして、アンカー名についても同じように振る舞ったと思います。

私が考えることができる唯一の回避策は、JavaScriptを使用することです。より低い帯域幅のニースプレースホルダーをロードし、ページのロード後に画像と大きなリソースをロードします。それをコーディングする方法はたくさんあります。ここに1つの例を示します： http://snipplr.com/view/10934/ 。

1
Eduard Florinescu

これは迷惑です。これが起こる理由は、ブラウザーがURLの＃をアンカーとして扱い、そのアンカーに一致するIDを持つhtml要素を見つけようとするためです。

Javascriptの使用に関するEduardosの回答が解決策です。リンクが存在しないものにクリックされた場合、jqueryまたはjavascriptを使用してURLハッシュを変更できます。その後、ユーザーがその特定のハッシュでページをブックマークすると、ブラウザーはランダムで存在しないハッシュを検索します。スクロール先などの派手なjsプラグインを使用している場合は、同じ動作になるように修正する必要があります。

その時点で、StackOverflowで質問し、使用しているコードの詳細を確認する必要があります。

ここでこの簡単な修正をご覧ください https://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page

次のようなこともできます：

$(function(){
 //Remove the hash
     if (location.hash) {
        window.location = "/"
      }
}
3
Frank