如何首先加载动态插入的img
我正在为一个带有 jquery 动画的网站构建一个启动页面。 我的问题是:有时(在浏览器缓存页面和图像之前)图像加载的顺序会降低动画的质量。
好的,这就是我所做的: 容器 div 具有以下 css:background:url(images/colorcity.png)
如果启用了 js,我会将灰度 叠加到 colorcity 上,其不透明度动画为 0,以获得漂亮的“淡入颜色”效果。 使用:
$("#container").prepend('')
为此,我 试图做的是以某种方式让前置图像成为页面上显示的第一件事,因为它将“隐藏”动画中使用的其他图像。不幸的是我所有的尝试都失败了。
我认为这是一个常见问题,并且可能是一个重复问题,但经过一两个小时的查找后我找不到答案。所以,抱歉,如果我是个菜鸟,哈哈。
提前感谢您的帮助。
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.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
尝试将其包含在页面顶部或附近:
这应该会强制图像尽早加载。如果问题仍然存在,请在
load()
回调中而不是ready()
中执行动画,以确保加载所有图像。顺便说一下,非常酷的页面(而且它在 Firefox 中似乎工作得很好)。
Try including this at or near the top of your page:
That should force the image to load pretty early on. If it's still a problem do your animation in the
load()
callback rather thatready()
, to ensure that all your images will be loaded up.Very cool page, by the way (and it seems to work great in firefox).