显示旋转轮图像直到整个页面加载

2023-12-24

我正在使用下面的代码:

在布局页面的 body 标签内:

<div id="loading">
    <img src="/images/user_profile/ajax-loading.gif" alt="Loading.." />
</div>

在起始页中:

<script type="text/javascript">
      $(document).ready(function(){
      $(window).load(function(){
      $('#loading').fadeOut();
      });
      });
</script>

css:

div.loading{

   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
   display:block;
}

问题是旋转图像不会立即出现,由于空白页面出现并且图像在页面加载之前显示,因此需要一段时间。

我想要一个解决方案,其中图像应立即显示,直到加载整页。


虽然有很多方法可以预加载图像(使用 CSS / Javascript 等),但对于小图像(例如通过内联包含图像)来说,对我来说可靠的方法是

<img src="data:image/gif;base64,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" alt="Loading..." />

(注:以上是真实的加载旋转器AjaxLoad http://www.ajaxload.info/ )

它可能不是最具可读性的,但它肯定是随文档一起加载的。假设它很简单(小于~2Kb),它根本不会影响您的性能。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

显示旋转轮图像直到整个页面加载 的相关文章

  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 如何将 Google Charts 与 Vue.js 库一起使用?

    我正在尝试使用 Vue js 库使用 Google Charts 制作图表 但我不知道如何添加到 div 这是我尝试做的 这是如何使用普通 javascript 添加图表 这是文档的代码示例 https developers google
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏?

    我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站 我创建了一个始终位于页面顶部的导航栏组件 并且我正在使用页面锚点导航 id 请注意 我还没有创建路由模块 到目前为止还没有必要这样做 导航栏代码如下
  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 如何阻止破折号自行包裹?

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 更改文本输入标签中文本的大小?

    我有一个很大的文本输入框 但我无法更改字体大小
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch
  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 返回活动时如何保留 Android ListView 滚动位置? [复制]

    这个问题在这里已经有答案了 可能的重复 返回 ListView 时保持 保存 恢复滚动位置 https stackoverflow com questions 3014089 maintain save restore scroll pos
  • 加权词嵌入是什么意思?

    In the paper http www aclweb org anthology S17 2100我正在努力实施 它说 在这项工作中 使用三种类型的文本对推文进行建模 表示 第一个是词袋模型 权重为 tf idf 词频 逆文档频率 部分
  • 如何更新 pyqtgraph 中的绘图?

    我正在尝试使用 PyQt5 和 pyqtgraph 拥有一个用户界面 我制作了两个复选框 每当我选择它们时 我想绘制代码中可用的两个数据集之一 每当我取消选择按钮时 我希望它清除相应的曲线 有两个带有文本的复选框A1 and A2他们每个人
  • Silverlight 中的同步 WebClient 下载

    我需要下载一个字符串 特别是来自 PHP Web 服务的 JSON 数组结果 作为返回字符串的函数 而不是 DownloadStringAsync 我需要这个 因为我正在编写一个下载字符串的函数 然后将其转换为 JsonArray 我正在使
  • Firebase Spark 版本中可以有多少个项目?

    我正在尝试添加第三个项目 但我不断收到此错误 您已经超出了可以创建的免费项目的最大数量 尝试通过项目设置删除一些项目或请求增加项目限制 我已通过项目设置删除了所有多余的项目 希望消除此错误 但它仍然存在 我不想要求更多的项目并且必须付费 我
  • 强制执行密码要求

    我想检查用户是否成功满足以下要求 密码至少有8个字符 由 1 个大写字母和 1 个小写字母组成 我该怎么做 我正在使用下面的 PHP 脚本 if strlen password lt 8 false else if preg match 0
  • 生成唯一 ID(检查或不检查)? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 考虑 youtube 视频网址 例如 e g http www youtube com watch v JVkaMqD5mI feature r
  • JavaFX 两个圆之间的距离并不断更新属性

    为了进行作业 我创建了 2 个可拖动的圆圈 并使用 javaFX 将它们连接起来 我需要添加计算两个圆之间的距离 或线的长度 的文本 并且当我拖动圆时该文本需要不断更新 但这就是我陷入困境的地方 Circle circle1 new Cir
  • 使用 PrintWindow API 截取屏幕截图(客户端区域)

    我正在使用 PrintWindow API 截取特定窗口 hwnd 的屏幕截图 这工作得很好 它可以截取整个窗口的屏幕截图 我的问题是 我的窗口高度是 742 宽度是 653 如果我想在窗口中间的某个位置 不是从 0 0 处 截取屏幕截图
  • 关于 GEKKO 中条件语句('m.if3')的问题

    我想在 GEKKO 代码中添加一些条件语句 我用 m if3 添加了以下语句 但是 它返回了语法错误 如果没有条件语句 我就不会出现这种错误 R1 1 m if3 R1 GEKKO m GEKKO remote False print m
  • 访问表达式主体成员以构建表达式树

    尝试使用表达式树按表达式构建订单 但我无法访问查询结果类的表达式主体属性 这是类结构 public class AssetFileRecord IAuditable IEntity INavigateToCustomValues publi
  • 我可以在 CouchDB 中进行事务和锁定吗?

    我需要执行事务 开始 提交或回滚 锁定 选择更新 我怎样才能在文档模型数据库中做到这一点 Edit 案例是这样的 我想经营一个拍卖网站 我还想如何直接购买 在直接购买中 我必须减少项目记录中的数量字段 但前提是数量大于零 这就是为什么我需要
  • 在 O(nlog(n)) 中查找“最大”重叠间隔对

    问题陈述 Inputn 个间隔的集合 s 1 t 1 s 2 t 2 s n t n Output一对间隔 s i t i s j t j 其中maximum所有区间对之间重叠 Example 输入区间 1 10 2 6 3 15 5 9
  • 如何为“扩展类”编写有意义的测试?

    编写有意义的测试的正确方法是什么扩展一个类 https dart dev guides language language tour extending a class与super关键词 class FooBase
  • Android 相机 takePicture 使用预览小缓冲区

    我正在使用 OPENCV 开发一个项目 我在 onCameraFrame 上有一些进程 当它显示预览时 用户可以拍照 但在某些设备中 我在调用 takePicture 方法后出现错误 我应该怎么办 E Camera JNI 11783 Ma
  • 我如何知道短信是否已到达 Twilio 中的目的地

    我正在开发一个网络应用程序 并且我正在使用 twilio 网关发送短信 我需要在我的页面上显示短信的状态 如果短信已发送 那么它将显示已发送 否则它将显示待处理 所以请告诉我如何知道消息是否已送达 以下是示例代码 public class
  • 如何提供一个后备程序集而不是无法加载的程序集?

    在运行时 如果引用的程序集无法加载 例如 强名称验证失败 因为它是测试签名的 有没有办法从另一个真实签名的路径提供替换程序集 我尝试订阅 AppDomain CurrentDomain AssemblyResolve 但它没有被触发 因为
  • 如何在Python 3中将二进制文件转换为列表中的文本文件?

    我正在尝试编写一个 Python 程序 该程序从 LabView 中获取多个二进制文件 从 tkinter 对话框中选择并打开 并将它们转换为可读的文本文件 或 csv 文件 理想情况下 但是 我在二进制到文本转换方面遇到了麻烦 我尝试查看
  • 如何快速比较颜色

    我正在尝试比较颜色 但无法使用isEqual方法 因为我正在尝试比较背景的颜色UICollectionViewCell 在这种情况下比较颜色的正确方法是什么 if cell layer backgroundColor UIColor red
  • 显示旋转轮图像直到整个页面加载

    我正在使用下面的代码 在布局页面的 body 标签内 div img src images user profile ajax loading gif alt Loading div 在起始页中 css div loading height