javascript jQuery 延迟直到背景图像加载，然后淡入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5210028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery delay until background image is loaded, then faded in?
提问by Brian
I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.
我一直在做大量的研究，并且有大量的插件和教程涵盖了大背景图像的使用。不幸的是，它们都有一个共同点——它们使用绝对定位的图像来充当“假”背景图像。
Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.
通常这对我来说很好用，我以前也这样做过，但是，这个项目有一个重复的背景图像，所以我有必要使用普通的 CSS 规则来声明背景图像。
All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections).
说了这么多，有没有办法检查图像是否已加载并告诉 jQuery 在加载此背景图像后淡入淡出？我正在寻找的主要内容是 jQuery 验证图像是否已实际加载的方法。如果没有，那么我想我需要解决一个简单的静态延迟（不幸的是，这会破坏连接速度较慢的用户的效果）。
Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to .hide()my entire body while the background image loads.
最后一件事 - 这可以通过 CSS 类切换/切换来完成，以便我可以在加载图像之前和之后更改主体类吗？对于没有 javascript 的用户来说，这将是一个后备，并且可以使我不必.hide()在加载背景图像时整个身体。
*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: How do I delay html text from appearing until background image sprite is loaded?*
*编辑：这个线程似乎有一个类似的讨论，但我认为它不是完全相同的事情：如何延迟 html 文本出现直到加载背景图像精灵？*
* EDIT 2 *
* 编辑 2 *
Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?
看起来上面的线程毕竟有效，除了我仍然缺少淡入淡出效果。我故意将淡入淡出设置得很高，但由于某种原因它没有动画，有什么想法吗？
<script>
$(function() {
// create a dummy image
var img = new Image();
// give it a single load handler
$(img).one('load',function() {
$('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads
});
// declare background image source
img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg";
// make sure if fires in case it was cached
if( img.complete )
$(img).load();
});
</script>
采纳答案by Vikas Baru
This seems an old thread but I found a solution for this. Hope it can help:
这似乎是一个旧线程，但我找到了解决方案。希望它可以帮助：
$(window).load(function(){
$('<img/>').attr('src', 'images/imgsrc.png').load(function() {
$('#loading').fadeOut(500);
$('#wrapper').fadeIn(200);
});
});
回答by AlanFoster
Use $(document).load() to achieve what you want.
使用 $(document).load() 来实现你想要的。
"I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?"
“我故意将淡入淡出设置得很高，但出于某种原因它没有动画，有什么想法吗？”
It is, just before the page has loaded
它是，就在页面加载之前
回答by Hussein
Add display: none;to your body tag
添加display: none;到您的身体标签
<body style="display: none">
Then with jQuery modify your code so it looks like this:
然后使用 jQuery 修改您的代码，使其看起来像这样：
$(img).load(function(){
$("body").show();
});
Now page content will only show after img loading is complete.
现在页面内容只会在 img 加载完成后显示。
回答by Fyodor Soikin
To check when the image is loaded, declare another, "regular" image (i.e. the <img>tag) with the same srcand attach event handler to it. Browser won't load the same image twice, so that event will also mean that the background is loaded.
要检查图像何时加载，请声明另一个相同的“常规”图像（即<img>标签）src并将事件处理程序附加到它。浏览器不会两次加载相同的图像，因此该事件也意味着背景已加载。
Another trick I can propose is to go back to "fake" background. In order to make it "tile", you can create an iframe, stretched to cover the whole body, and having that image as background, and then fade that iframe as you like, while the rest of the page remains safely in the "main" frame.
我可以提出的另一个技巧是回到“假”背景。为了使其“平铺”，您可以创建一个iframe, 拉伸以覆盖整个身体，并将该图像作为背景，然后根据需要淡化该 iframe，而页面的其余部分仍安全地保留在“主”中框架。
