Gehen Sie nach dem Laden zu verankern

8

Die Idee

Ich habe eine Benutzerhandbuchseite, sie ist ziemlich groß und jedem Thema ist ein Anker zugeordnet

Auf meiner Produktseite kann ich den Kunden direkt zu diesem Thema im Handbuch mit einem Anker verknüpfen, wie:

Handbuch:

%Vor%

Produktseite:

%Vor%

Das Problem

Wenn ich auf der Produktseite auf den Link "Verwalten von Optionen" klicke, wird das Handbuch aufgerufen und sofort der Anker #manage_options

Aber oft bleibt es an der falschen Stelle stehen, weil es zum Anker geht, dann lädt es Bilder, die die Position des Inhalts verändern.

Ist es möglich zu warten, bis der gesamte Inhalt geladen ist, dann geht es zum Anker, oder eine bessere Lösung für dieses Problem?

Danke!

    
Lucas Bustamante 09.03.2013, 22:02
quelle

2 Antworten

2
  

... es lädt Bilder, was die Position des Inhalts ändert

Es empfiehlt sich, Ihre Bildgrößen explizit anzugeben, um unnötige Übermalungen zu vermeiden:

Ссылка

  

Geben Sie die Bildmaße an

     

Überblick

     

Die Angabe einer Breite und Höhe für alle Bilder ermöglicht eine schnellere Darstellung   Rendering durch Eliminierung der Notwendigkeit unnötiger Rückflüsse und   Repaints.

     

Details

     

Wenn der Browser die Seite auslegt, muss er umherfließen können   austauschbare Elemente wie Bilder. Es kann mit dem Rendern einer Seite beginnen   noch bevor Bilder heruntergeladen werden, vorausgesetzt, dass es den   Dimensionen, um nicht austauschbare Elemente zu umhüllen. Wenn keine Dimensionen   werden im umschließenden Dokument oder bei den Dimensionen angegeben   spezifiziert nicht mit denen der tatsächlichen Bilder übereinstimmen, wird der Browser   erfordern einen Reflow und Repaint, sobald die Bilder heruntergeladen werden. Zu   verhindern Reflow, geben Sie die Breite und Höhe aller Bilder, entweder in   das HTML-Tag oder in CSS.

     

Empfehlungen

     

Geben Sie Dimensionen an, die mit denen der Bilder selbst übereinstimmen. Nicht   Verwenden Sie Breiten- und Höhenangaben, um Bilder im laufenden Betrieb zu skalieren. Wenn ein   Bilddatei ist tatsächlich 60 x 60 Pixel, legen Sie die Abmessungen nicht auf 30 fest   x 30 im HTML oder CSS. Wenn das Bild kleiner sein muss, skalieren Sie es ein   einen Bildeditor und stellen Sie die Abmessungen entsprechend ein (siehe Bilder optimieren   für Details.) Achten Sie darauf, Dimensionen auf dem Bildelement oder anzugeben   Eltern auf Blockebene Stellen Sie sicher, dass Sie die Dimensionen für das Element festlegen   selbst oder ein Elternteil auf Blockebene. Wenn das übergeordnete Element nicht auf Blockebene ist,   Dimensionen werden ignoriert. Legen Sie keine Dimensionen für einen Vorgänger fest   ist kein unmittelbarer Elternteil.

Also:

%Vor%

Oder

%Vor%

... oder Sie können die Dimensionen in einem externen Stylesheet angeben, aber im Allgemeinen ist das schwieriger mit variierenden Bildgrößen. Dadurch wird sichergestellt, dass sich Ihre Inhalte beim Laden der Bilder nicht verschieben.

    
Wesley Murch 09.03.2013, 22:20
quelle
1

Sie können das Problem mit einem JQuery-Skript lösen, dies kann den Anker-Link nach dem Laden der Seite verschieben, ich habe auch einen Offset von 20 px hinzugefügt.

%Vor%     
zod 01.12.2017 15:08
quelle

Tags und Links