程序员经验分享-hwhale

加载 GIF（预加载器）仅在 Chrome 上卡住

2023-11-23

我的网站上有一个画廊。该图库包含 15 张图片，每张约 500KB（总大小为 7.5MB）。

因为图库需要一段时间才能加载（在我的计算机上需要 25 秒，这取决于连接情况），我希望访问者知道图库正在加载，因此Ajax 加载 GIF.

我希望访问者一进入图库页面就看到正在加载的 GIF，直到图库图像下载完毕并准备好查看。

为了实现我的目标，这就是我所做的：

这是画廊 HTML 页面正文的开头：

<body>
    <img src="images/ajax-loader.gif" alt="" class="hiddenPic" /> 
    <!-- loading Ajax loading GIF before all the other images -->

这是画廊 CSS 部分：

#gallery {
  background: url(images/ajax-loader.gif);
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center;

所以基本上，加载 GIF 应该在访问者进入图库页面时立即下载，因为它是图库页面中的第一个对象<body>即将被下载。但是，由于以下原因，它不可见hiddenPic class.

此方法应该有助于尽快准备好加载 GIF 并作为图库背景可见，直到所有图库图像都已下载且图库准备就绪。

However，加载 GIF 在 Google Chrome 上无法正常工作；它在 Firefox 和 IE 上运行得非常好（完美旋转） - 但在 Chrome 上却卡住了（无法正常旋转），从它出现的那一刻起直到图库准备好。

Update:我知道我可以实现一个更好的画廊（就像评论中建议的那样），这在进入画廊页面时需要用户提供更少的资源 - 但我不明白当 GIF 加载器时这如何成为问题的原因在 Firefox 和 IE 上完美运行。

为什么 Ajax 加载 GIF 在 Chrome 上无法正常工作？


你只需要删除第602行的这个声明：

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

html

css

Googlechrome

gif

preloader

加载 GIF（预加载器）仅在 Chrome 上卡住 的相关文章

随机推荐

  • windows.h 和 MFC

    为什么我不能将 windows h 包含在 afx MFC 项目中 通常 MFC 应用程序代码包括afx h or afxwin h 后者包括前者 前两行windows h are ifndef WINDOWS define WINDOWS

  • 公钥加密如何工作[重复]

    这个问题在这里已经有答案了 我对 RSA 的理解是 Alice 可以创建公钥和私钥组合 然后将公钥发送给 Bob 然后鲍勃可以使用公钥加密某些内容 而爱丽丝将使用公钥和私钥组合来解密它 但是 Alice 如何加密要发送给 Bob 的内容 鲍

  • Apache - 如何限制文件的最大下载速度？ （如果不是apache，我可以运行lighthttpd）

    我有很多视频 但我只想将这些文件的最大下载速度限制为 1mbps 我该如何设置 最好在 Apache 中 但 lighthttpd 是一个选项 thanks 如果您只想限制每个连接的下载速度 而不考虑管理总数或执行更细粒度的控制 那么处理此

  • MySql 单表，选择最近 7 天并包含空行

    我在 stackoverflow 上搜索了类似的问题 但我不明白如何使这项工作 我正在尝试做什么 因此 我想从数据库中获取最近 7 天的交易并获取总销售额 如果某天没有数据 还包括空行 到目前为止我所拥有的 http sqlfiddle c

  • Angular-CLI 和 ThreeJS

    我一直在尝试添加适当的 npm 依赖项 以将三个依赖项添加到我的 Angular CLI 项目中 过去几个月 CLI 变化如此之快 我一直找不到工作源 这里有一些想法 搭载脚本 这是我的第一次尝试 简单地添加到index html 文件 但

  • 安装自定义 Cocoa 框架的最佳方法

    我有一个自定义框架 遵循 Apple 框架编程指南中的建议 gt gt 安装你的框架我安装在 Library Frameworks 中 我通过使用以下脚本添加运行脚本构建阶段来实现此目的 cp R build Debug MyFramewo

  • Android 中的 onResume() 是在 onRequestPermissionsResult() 之后调用的吗？

    我有一个活动 我已经把checkSelfPermission and requestPermissions中的方法onCreate method 我也有一个onRequestPermissionsResultonCreate 之外的方法 最

  • 加载时隐藏 jQuery Accordion

    我正在测试一个连接速度较慢的网站构建 我注意到 jQuery Accordion 会长时间保持展开状态 直到网站的其余部分加载完毕 然后最终崩溃 不太漂亮 我想知道如何在加载过程中保持它折叠并仅在单击时展开 我正在使用独立的 1 6 版本的

  • docker多阶段构建Go镜像-x509：由未知权威机构签名的证书

    我尝试建立go图像在私人公司网络使用docker 多阶段构建 FROM golang latest as builder WORKDIR app COPY go mod go sum RUN go mod download COPY RUN

  • 升级到 Android Studio 2.3 后 android-apt 的插件不兼容

    从 2 2 升级到 2 3 后 我看到此警告 当我尝试编译该项目时 我看到这个编译错误 如何在不降级到以前的 gradle 版本的情况下解决此问题 有没有 android apt 的更新可以解决这个问题 The android apt pl

  • 断言Equal和断言Is之间有什么区别（assertIs是在Python 2.7中引入的）？

    参考 http docs python org library unittest html assert methods assertEqual a b checks that a b assertIs a b checks that a

  • 逐渐旋转物体以面对一点？

    我正在制作一个 JavaScript 游戏 我希望敌方船只能够向指定点旋转 然后可以根据它们的角度计算它们的运动 仅当船舶位于其目标的下方和右侧时 以下旋转代码才有效 如果船在左边 它会旋转到约 0 度并在那里抖动 在右上角 它不断逆时针旋

  • 如何将列表中的各个元素与数字相乘？

    S 22 33 45 6 21 6 51 8 P 2 45 Here S是一个数组 我如何将其相乘并得到该值 SP 53 9 80 85 111 72 52 92 126 91 在 NumPy 中这非常简单 import numpy as

  • 如何在发送到服务器之前在 JavaScript 中压缩/gzip 用户数据？

    我对 JavaScript 还很陌生 我遇到过这样的情况 许多用户可以将大型 JSON 发送回服务器 为了限制流量 我想对它们进行 gzip 压缩 这在 JavaScript 中可能吗 如何从 JSON 的字符串表示形式创建字节数组 谢谢

  • Delphi：远离 VSS

    我们是由少数 Delphi 开发人员组成的团队 他们多年来一直在使用 VSS 我知道这很遗憾 但我们没有使用 VCS 的任何高级功能 因此它在很多情况下都工作正常 但有时它是快把我逼疯 VSS 的好处是我们使用第三方插件将 VSS 与 De

  • 使用 Oracle OLE DB 提供程序时如何解决 SQL 查询参数映射问题？

    当尝试使用 Oracle OLE DB 提供程序输入带参数的 SQL 查询时 出现以下错误 无法从 SQL 命令中提取参数 提供程序可能无法帮助解析命令中的参数信息 在这种情况下 请使用 来自变量的 SQL 命令 访问模式 其中整个 SQL

  • 在 OpenShift 中提供 Django 静态文件

    根据2014 年 3 月博客文章 OpenShift 现在删除了一些目录 如 wsgi wsgi static data 和 libs 鉴于我使用 wsgi static 来实现此目的 从现在开始我应该如何提供 django 静态文件 根据

  • 想要使用向量作为函数的参数，而不必分隔其元素

    如果我使用以下命令调用 matlab 函数 函数 1 2 3 4 5 它工作得很好 但如果我这样做 a 1 2 3 4 5 a 1 2 3 4 5 给出相同的结果 then func a 给我 错误 gt 函数位于 11 没有足够的输入参数

  • 使用 Java Native Interface 的缺点

    我无法理解使用 JNI 的这两个缺点 我想更多地了解他们 很难调试运行时错误 本机代码 JNI 代码中的错误会导致整个 JVM 崩溃 并且不提供任何正常恢复机制 调试困难 您需要一个 C C 调试器来调试本机代码 不可能轻松地从 Java

  • 加载 GIF（预加载器）仅在 Chrome 上卡住

    我的网站上有一个画廊 该图库包含 15 张图片 每张约 500KB 总大小为 7 5MB 因为图库需要一段时间才能加载 在我的计算机上需要 25 秒 这取决于连接情况 我希望访问者知道图库正在加载 因此Ajax 加载 GIF 我希望访问者一

热门标签