加载后转到锚点 [英] Go to anchor AFTER loading

问题描述

我有一个《用户手册》页面，它很大，每个主题都有链接的锚点

I have a User Manual page, it is kinda big, and each topic has a anchor linked to it

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

In my product page, I can link the client straight to that topic in the manual with a anchor, like:

手册:

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

产品页:

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

问题

当我点击产品页面中的如何管理选项" 链接时，它会转到手册，然后立即转到#manage_options锚点

The Problem

When I click the "How to Manage Options" link in Product Page, it goes to the manual and immediately to the #manage_options anchor

但是它经常停在错误的地方，因为它到达了锚点，然后继续加载图像，直到内容的位置改变为止

But it often stops in the wrong place, because it goes to the anchor, then it keeps loading images, wich changes the position of the content

是否可以等待所有内容都被加载，然后转到锚点，或者针对此问题的任何更好的解决方案?

Is it possible to wait for all the content to be loaded, then it goes to the anchor, or any better solution for this problem?

谢谢！

推荐答案

...它会不断加载图片，从而更改内容的位置

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

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

It's a best practice to explicitly declare your image sizes to avoid unnecessary repaints:

https://developers.google.com/speed/docs/最佳做法/渲染#SpecifyImageDimensions

指定图像尺寸

概述

为所有图像指定宽度和高度可以更快 通过消除不必要的回流焊和 重新粉刷.

Specify image dimensions

Overview

Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

当浏览器布置页面时，它需要能够四处移动 可替换元素，例如图像.它可以开始呈现页面 即使在下载图像之前，只要它知道 环绕不可替换元素的尺寸.如果没有尺寸 在包含文档中指定，或者如果尺寸 指定的与实际图像不匹配，浏览器将 下载图像后，需要进行重排并重新粉刷.到 要防止回流，请在以下位置指定所有图像的宽度和高度: HTML标记或CSS.

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

指定与图像本身匹配的尺寸.别 使用宽度和高度规格来即时缩放图像.如果 图像文件实际上是60 x 60像素，请勿将尺寸设置为30 HTML或CSS中的x 30.如果图像需要缩小，则将其放大 图像编辑器并设置其尺寸以匹配(请参阅优化图像) 有关详细信息.)请确保在图像元素上指定尺寸或 块级父级确保在元素上设置尺寸 本身或块级父级.如果父级不是块级的，则 尺寸将被忽略.不要在祖先上设置尺寸 不是直系父母.

Specify dimensions that match those of the images themselves. Don't use width and height specifications to scale images on the fly. If an image file is actually 60 x 60 pixels, don't set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match (see Optimize images for details.) Be sure to specify dimensions on the image element or block-level parent Be sure to set the dimensions on the element itself, or a block-level parent. If the parent is not block-level, the dimensions will be ignored. Do not set dimensions on an ancestor that is 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;">

...或者您可以在外部样式表中指定尺寸，但是通常在改变图像尺寸时会比较困难.这样可以确保您的内容在加载图像时不会移位.

...or you can specify the dimensions in an external stylesheet, but generally that is more difficult with varying image sizes. This will ensure your content doesn't shift as images are loaded.

这篇关于加载后转到锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！