给WordPress添加加载动画

加载页面插件在您的网站上执行预加载的图像,并显示一个加载进度屏幕和完成百分比。一旦加载完成,屏幕就会消失。
给WordPress添加加载动画

插件:

Loading Page with Loading Screen

插件主页:

https://wordpress.org/plugins/loading-page/

后台搜索该插件名即可

加载页面插件在您的网站上执行预加载的图像,并显示一个加载进度屏幕和完成百分比。一旦加载完成,屏幕就会消失。

官方介绍:

使用“加载屏幕”插件加载页面会在您的网站上执行图像预加载,并显示加载进度屏幕,其中包含完成百分比。一旦加载完所有内容,屏幕就会消失。

有关主要功能的更多信息:

  • 显示一个显示给定页面加载百分比的屏幕。在繁重的页面中,“使用加载屏幕加载页面”插件可以了解页面外观何时准备就绪。
  • 允许仅在主页或网站的所有页面中显示加载屏幕。
  • 允许选择加载进度屏幕的颜色,或选择图像作为背景。默认情况下,加载屏幕的颜色为黑色,但可以通过网站设计对其进行修改以调整加载屏幕的外观。
  • 允许显示或删除显示加载百分比的文本。

基本插件可从WordPress插件目录中免费获得,具有在您的网站上显示加载屏幕所需的所有功能。

高级功能:

  • 允许选择加载进度屏幕。插件的高级版本包括多个加载屏幕。
  • 特别注意“徽标屏幕”,允许在加载过程中使用网站的徽标或任何其他图像。
  • 允许从多个可能的动画中进行选择,以在完成加载过程后显示页面的内容。
  • 提高页面性能。
  • 延迟加载功能允许更快地加载并减少带宽消耗。这些图像是带宽和加载时间的主要消费者,因此具有多个图像的WordPress网站可以通过延迟加载功能提高其性能并减少加载时间。
  • 允许选择图像作为占位符,以在预加载期间替换实际图像。建议选择较轻的图像以增加WordPress的性能,在加载页面过程中将使用所选图像而不是原始图像。

高级版插件演示

http://demos.net-factor.com/loading-page/wp-login.php

http://demos.net-factor.com/loading-page/

什么是懒惰加载?

延迟加载意味着在最终加载页面之前不会加载原始图像。此操作可提高网页的下载速度。

如果您想了解有关此插件或其他插件的更多信息,请不要怀疑访问我的网站:

http://wordpress.dwbooster.com

接口

要在您的网站上使用加载页面加载页面,只需激活插件即可。如果您想修改任何默认选项,请转到插件的设置。可以通过转到WordPress仪表板上的设置>加载页面或转到插件找到它们; 可以在插件说明中找到“设置”链接。

带有加载屏幕设置的加载页面分为两部分:第一部分专门用于激活和设置加载屏幕,第二部分用于延迟加载未立即显示的图像(需要页面的图像)滚动以便被看到)。

加载屏幕设置

加载屏幕的设置选项包括:

  • 启用加载屏幕:激活图像的预加载并在加载网页时显示加载屏幕。
  • 每个会话显示一次加载屏幕每个会话仅显示一次加载屏幕。
  • 显示加载屏幕:显示所有屏幕尺寸的加载屏幕,或者屏幕尺寸是否满足条件。
  • 仅显示加载屏幕:仅在主页,所有页面或特定页面或帖子上显示加载屏幕。在最后一种情况下,页面或帖子的ID应用逗号“,”分隔。
  • 以下位置排除加载屏幕:从输入ID的页面或帖子中删除加载屏幕,以逗号“,”分隔
  • 选择加载屏幕:允许选择加载屏幕。高级版插件包括多个加载屏幕。
  • 选择背景颜色:允许选择与您网站的设计指南兼容的加载屏幕的背景颜色。
  • 选择图像作为背景:允许将图像显示为加载屏幕背景,图像可以平铺或居中显示。
  • 全屏显示图像:允许以全屏模式调整背景图像。
  • 选择前景色:允许选择显示加载进度信息的图形和文本的颜色。
  • 额外秒数:允许在加载过程结束时删除加载屏幕之前添加秒数。
  • 添加广告或您自己的代码块:允许将广告或其他代码块添加到加载屏幕。
  • 在页面上应用效果:在完成加载过程后,使用动画显示页面的内容。
  • 显示加载百分比:显示加载百分比。加载百分比根据页面中的图像计算。
  • 区域故障排除 – 加载屏幕:允许深度禁用/启用搜索。

延迟加载设置(仅限高级版)

设置延迟加载和提高WordPress性能的选项有:

  • 启用延迟加载:启用在用户当前查看区域之外的图像的延迟加载,从而改善整个页面的呈现时间。
  • 选择要默认加载的图像:选择要显示为实际图像占位符的图像,其加载将被延迟。建议选择光照图像以增加WordPress的性能。
  • 区域故障排除 – 延迟加载:允许输入一些文本以使用类或属性中输入的文本排除图像标记。
因主题原因,在示例代码中,有部分
a_投稿
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论