logo标签列表

当页面加载时，将div或页面内容变成灰色

javascripthtml
3

enter image description here

我该如何实现类似于Udemy页面加载的方式？ 正如您所看到的，divs / 页面内容最初是灰色的，一旦页面加载完成，内容就会出现。 我该如何实现类似的效果？
使用SVG图像？你到目前为止尝试了什么？ - evolutionxbox
有很多可能的方法可以实现这个目标（例如使用灰色背景的空div，占位图像等）。请尝试一下，然后回来分享你的代码和尝试过程，这样其他人就可以帮助你解决问题。但我们不能免费为你开发整个解决方案。 - Jeremy Thille
在加载Udemy时，一旦看到这个，请取消加载。然后前往检查选项卡并查看它指向的所有CSS属性。 - p2kr
1个回答
5

这种类型的加载被称为骨架屏效果。您需要按照以下步骤来实现此效果：

  1. 为您的项目创建一个骨架屏。
  2. 为骨架屏(占位符)添加过渡和动画效果。
  3. 添加 js 加载脚本，并在加载完成前加载多个骨架屏。

如果您需要澄清任何内容，可以参考这篇教程：骨架屏教程

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接