如何首先加载动态插入的img

发布于 2024-09-26 08:17:31 字数 623 浏览 6 评论 0原文

我正在为一个带有 jquery 动画的网站构建一个启动页面。 我的问题是:有时(在浏览器缓存页面和图像之前)图像加载的顺序会降低动画的质量。

好的,这就是我所做的: 容器 div 具有以下 css:background:url(images/colorcity.png) 如果启用了 js,我会将灰度 叠加到 colorcity 上,其不透明度动画为 0,以获得漂亮的“淡入颜色”效果。 使用: $("#container").prepend('')

为此,我 试图做的是以某种方式让前置图像成为页面上显示的第一件事,因为它将“隐藏”动画中使用的其他图像。不幸的是我所有的尝试都失败了。

我认为这是一个常见问题,并且可能是一个重复问题,但经过一两个小时的查找后我找不到答案。所以,抱歉,如果我是个菜鸟,哈哈。

提前感谢您的帮助。

页面:http://roughgiraffed.com/barrandbarrbags/

I am building a splash page for a website with jquery animations.
My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.

Ok, heres what I did:
the container div has the following css: background:url(images/colorcity.png)
if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect.
to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')

What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.

I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.

Thank you ahead of time for any help.

The page: http://roughgiraffed.com/barrandbarrbags/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

执手闯天涯 2024-10-03 08:17:31

尝试将其包含在页面顶部或附近:

<img src="images/greycity.png" style="display: none;" />

这应该会强制图像尽早加载。如果问题仍然存在,请在 load() 回调中而不是 ready() 中执行动画,以确保加载所有图像。

顺便说一下,非常酷的页面(而且它在 Firefox 中似乎工作得很好)。

Try including this at or near the top of your page:

<img src="images/greycity.png" style="display: none;" />

That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.

Very cool page, by the way (and it seems to work great in firefox).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文