html - 加载后转到 anchor

Question

理念

我有一个用户手册页面，它有点大，每个主题都有一个链接到它的 anchor 。

在我的产品页面中，我可以使用 anchor 将客户直接链接到手册中的该主题，例如:

手册:

<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 anchor

但它经常停错地方，因为它去了 anchor ，然后它一直加载图像，这改变了内容的位置

是否可以等待所有内容加载完毕，然后再去 anchor ，或者有什么更好的解决这个问题的方法？

Answer 1

...it keeps loading images, which changes the position of the content

最佳做法是明确声明图像大小以避免不必要的重绘:

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

Specify image dimensions

Overview

Specifying a width and height for all images allows for fasterrendering by eliminating the need for unnecessary reflows andrepaints.

Details

When the browser lays out the page, it needs to be able to flow aroundreplaceable elements such as images. It can begin to render a pageeven before images are downloaded, provided that it knows thedimensions to wrap non-replaceable elements around. If no dimensionsare specified in the containing document, or if the dimensionsspecified don't match those of the actual images, the browser willrequire a reflow and repaint once the images are downloaded. Toprevent reflows, specify the width and height of all images, either inthe HTML tag, or in CSS.

Recommendations

Specify dimensions that match those of the images themselves. Don'tuse width and height specifications to scale images on the fly. If animage file is actually 60 x 60 pixels, don't set the dimensions to 30x 30 in the HTML or CSS. If the image needs to be smaller, scale it inan image editor and set its dimensions to match (see Optimize imagesfor details.) Be sure to specify dimensions on the image element orblock-level parent Be sure to set the dimensions on the elementitself, or a block-level parent. If the parent is not block-level, thedimensions will be ignored. Do not set dimensions on an ancestor thatis not an immediate parent.

所以使用:

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

或者

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

...或者您可以在外部样式表中指定尺寸，但通常对于不同的图像尺寸来说这会更困难。这将确保您的内容不会随着图像的加载而改变。