东莞网页制作:如何减少页面加载时的内容转移

2019.08.13 mf_web

118

你有没有开过一个网站,开始阅读,经过一段时间后,所有资产都已完成加载,你发现你丢失了你的滚动位置?我每天都经历这种情况,尤其是在我的移动设备上通过慢速连接进行冲浪时 - 这是一种令人沮丧和分心的经历。

每次浏览器必须重新计算文档中元素的位置和几何时,都会发生重排。当新的DOM元素添加到页面,图像加载或元素的维度发生变化时,会发生这种情况。在本文中,我们将分享技术,以尽量减少这种内容转移。

媒体

加载网站时,需要一些时间才能加载图像并且浏览器能够计算所需的空间。以节流设置为3G录制的以下GIF演示了该效果。

避免这种情况的一种方法是为所有图像设置固定的宽度和高度,但这对于响应式网站来说并不实用,因为我们希望图像和视频适应可用空间。

内在比率

使用固有比率(也称为padding-bottom黑客),我们可以定义媒体占用的大小。

内在比率的公式

获取值的公式padding-bottom是:

(height of the asset / width of the asset) * 100(%)
复制

如果我们的图像宽度为1600像素,高度为900像素,则值为:

 (900 / 1600) * 100(%) = 56.25%
复制

这是一个Sass mixin,我们可以用来定义图像,视频,iframe,对象和嵌入内容的宽高比。

@mixin aspect-ratio($width, $height) {
  position: relative;
  padding-bottom: ($height / $width) * 100%;
  img,
  video,
  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }}
复制
.ratio-sixteen-nine {
  @include aspect-ratio(1600, 900);}
复制
<figure class="ratio-sixteen-nine">
  <img src="waterfall.jpg" alt="Waterfall in Iceland"></figure>
复制

为了使体验更好,我们可以通过向包装器添加背景来设置占位符的样式。

figure {
  background: #ddd url(camera-icon.svg) no-repeat center center;}
复制

对于图像,我们可以使用图标向用户指示将显示图像。通过实现宽高比占位符,用户可以决定是等待图像还是继续阅读,而不会丢失当前的滚动位置。

小工具

除了媒体内容之外,您的网站可能正在使用通过JavaScript添加的小部件或第三方内容,如果处理不当,也会转移内容。

广告

虽然现在很多网站都有响应,但大多数广告仍有固定的尺寸。对于响应式网站,我们可以在HTML中使用占位符,如果它们与指定的屏幕大小匹配,我们会在其中加载预定义的广告。

/* On small screens show 320x250 banner */@media all and (max-width: 500px) {
  .ad-container-s {
    width: 320px;
    height: 250px;
  }}/* On medium screens show 728x90 banner */@media all and (min-width: 800px) {
 .ad-container-m {
   width: 728px;
   height: 90px;
 }}
复制

在我们的示例中,我们有一个中矩形(300×250)和一个排行榜(728×90)。在小屏幕上,我们将显示矩形,而在更大的屏幕上,我们将显示排行榜。通过为占位符设置固定尺寸,广告的加载不会触发内容转移。

广告
(查看大图)

许多人永远不会看到广告,只会看到空占位符,因为他们会使用广告拦截器,或广告不会出于其他原因。因此,您应该为占位符设置样式,以指示通常有广告。如果您已使用广告拦截器检测脚本,则可以使用消息或产品宣传替换占位符。

如果广告的劣势较少,用户甚至可能会重新考虑在您的网站上使用广告拦截器 - 这会分散注意力。

动态内容

对于其他小部件,我们可能事先不知道它们的确切大小,但我们可以定义小部件所需的最小高度。

.widget {
  min-height: 400px;}
复制

通过使用min-height,我们将为大多数情况保留足够的空间,并在窗口小部件需要更多空间时避免大的跳跃。

找到合适的尺寸min-height需要一些时间,但用户会感谢他们的阅读体验没有突然中断。

网络字体

字体具有不同的x高度。因此,我们的后备字体和Web字体将占用不同的空间量。

目前,加载Web字体的一个最佳实践是使用Font Face Observer脚本来检测何时加载了字体,以便之后可以在CSS中应用它。

在此示例中,一旦Web字体可以使用,我们就将webfont-loaded该类应用于该html元素。

var font = new FontFaceObserver('Lato');font.load().then(function () {
  document.documentElement.className += " webfont-loaded";});
复制

在CSS中,我们在成功加载后应用Web字体。

p {font-family: sans-serif;}.webfont-loaded p {font-family: 'Lato', sans-serif;}
复制

当web字体最终完成加载时,我们会注意到快速跳转。为了最大限度地减少这种情况,我们可以修改后备字体的x高度,以尽可能地匹配Web字体,从而减少跳跃。

字体大小调整

该font-size-adjust属性允许您指定使用后备字体时的最佳宽高比。对于大多数字体,比率介于0.3和0.7之间。

要为您的网络字体找到正确的宽高比,我建议您将浏览器设置为并排显示两个段落,一个使用网络字体,另一个使用后备字体,然后使用浏览器的开发人员工具调整属性。

p {
  font-size-adjust: 0.5;}
复制

因为font-size-adjust目前仅支持 Firefox和Chrome(标志后面),我们可以使用letter-spacing和组合line-height来调整其他浏览器中后备字体的大小。

p {
  font-family: sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 0.95;}/* Older browsers */p {
  letter-spacing: 1px;
  line-height: 0.95;}/* If browser supports font-size-adjust, use this */@supports (font-size-adjust: none) {
  p {
    letter-spacing: 0;
    line-height: 1;
    font-size-adjust: 0.59;
  }}/* Once the web font has loaded, apply this */.webfont-loaded p {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0;
  line-height: 1;}
复制

在这里,我们首先定义letter-spacing并line-height作为后备,我们正在使用@supports功能检测,然后font-size-adjust在支持时应用。

我们不会为所有字体提供完美的解决方案,但它会在字体更改时最大限度地减少分心。

布局

到目前为止,我们已经介绍了媒体,小部件和字体,但是当应用主布局的CSS时,内容也会发生变化。

FLEXBOX与网格

如Jake Archibald所示,Flexbox 可以导致水平移动。

使用flexbox时,内容控制布局的显示方式,而使用网格布局时,将根据网格定义显示布局。因此,使用网格作为主要布局更好。

如果您在具有良好Internet连接的快速计算机上进行开发,您可能不会看到内容转移,但是在慢速连接上进行冲浪的用户将会。

.wrapper {
  display: flex;}.sidebar {
  flex: 1 1 30%;}.content {
  flex: 1 1 70%;}/* Use grid instead of flexbox if supported */@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: 30% 70%;
  }
  .sidebar {
    grid-column: 1;
  }
  .content {
    grid-column: 2;
  }}
复制

目前对CSS网格布局的支持并不是很好,但是在Safari 10发布的下个月它将会增加,而基于Firefox和Blink的浏览器可能会默认启用它。为了面向未来,我们应该使用flexbox作为基础,并在支持的情况下增强网格布局的体验。

小小的细节

根据用户交互更改CSS属性通常会导致水平移位。使用其他CSS属性可以避免这种情况。

粗体文字的文字阴影

更改文本的字体粗细时,元素的大小将发生变化,并且会发生内容转换。

a:hover,
a:focus {
  font-weight: bold;}@supports (text-shadow: none) {
  a:hover,
  a:focus {
    font-weight: normal;
    text-shadow: 1px 0 0 currentColor;
  }}
复制

重绘text-shadow可能在计算上比更改更密集font-weight,但它是在更改为较重的文本时防止跳转效果的唯一方法。

我们再一次使用特征检测来text-shadow代替font-weight用户的交互。由于@supports支持的浏览器数量较少text-shadow,我们还可以考虑使用Modernizr检测该功能并在所有支持的浏览器中应用此改进。

小细节往往会带来很好的体验。您的用户将会欣赏避免的每一次内容转移。

滚动锚定

现在您已经了解了避免内容跳转的方法,您可能想知道为什么浏览器无法更有效地阻止内容跳转。

Chrome团队最近推出了滚动锚定功能。

滚动锚定是一种建议的干预措施,可调整滚动位置以减少可见内容跳跃。

目前,滚动锚定仅适用于Chrome中的实验性标记,但其他浏览器供应商已表现出兴趣并希望将来能够实施。

结论

如您所见,有许多解决方案可以避免页面加载的跳跃效应。是的,实现所有这些技术需要一些时间,但这是完全值得的 - 直到更多浏览器支持滚动锚定。

如果你花时间通过使用上面提到的技术来避免跳跃 - 定义占位符,保留空间和准备回退 - 那么用户将有一个不那么讨厌的体验,并且能够不受干扰地享受你的内容。

您如何最大限度地减少网站上的内容转移?你有没有发现任何防止跳跃效果的技巧或技巧?


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP