html – 加载GIF(预加载器)仅在Chrome上卡住

html – 加载GIF(预加载器)仅在Chrome上卡住,第1张

概述我的网站上有一个画廊.该图库包含15个图像,每个图像大约500KB(总大小为7.5MB). 因为画廊需要一段时间才能加载(我的电脑需要25秒,很难取决于连接),我希望访问者知道画廊正在加载,因此Ajax loading GIF. 我希望访问者在进入图库页面后立即看到加载GIF,直到图库图像已下载并准备好进行查看. 为了实现我的目标,这就是我所做的: 这是图库HTML页面正文的开头: <body> 我的网站上有一个画廊.该图库包含15个图像,每个图像大约500KB(总大小为7.5MB).

因为画廊需要一段时间才能加载(我的电脑需要25秒,很难取决于连接),我希望访问者知道画廊正在加载,因此Ajax loading GIF.

我希望访问者在进入图库页面后立即看到加载GIF,直到图库图像已下载并准备好进行查看.

为了实现我的目标,这就是我所做的:

这是图库HTML页面正文的开头:

<body>    <img src="images/AJAX-loader.gif" alt=""  />     <!-- 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类,它不可见.

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

但是,加载GIF在Google Chrome上无法正常运行;它在firefox& IE(完美无瑕地旋转) – 但是从Chrome出现的那一刻起到画廊准备好的那一刻,它就会卡在Chrome上(无法正常旋转).

更新:我知道我可以实现一个更好的画廊(就像评论中建议的那样),当进入画廊页面时,用户需要更少的资源 – 但我不明白这是什么原因导致问题GIF加载程序在firefox& IE浏览器.

为什么AJAX加载GIF在Chrome上无法正常运行?

解决方法 您只需要在第602行删除此声明:
background-attachment: fixed;
总结

以上是内存溢出为你收集整理的html – 加载GIF(预加载器)仅在Chrome上卡住全部内容,希望文章能够帮你解决html – 加载GIF(预加载器)仅在Chrome上卡住所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1108845.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-29
下一篇 2022-05-29

发表评论

登录后才能评论

评论列表(0条)

保存