jQuery 如何让图像在加载时淡入淡出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1383870/
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 How do you get an image to fade in on load?
提问by Cool Hand Luke
All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can't managed to fadeIn on load please help. Sorry if this question has already been answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me.
我想要做的就是在页面加载时淡入我的徽标。我今天刚接触 jQuery，我无法在加载时淡入淡出，请帮忙。抱歉，如果这个问题已经得到回答，我已经看过并尝试针对不同的问题调整其他答案，但似乎没有任何效果，并且开始让我感到沮丧。
Thanks.
谢谢。
Code:
代码：
<script type="text/javascript">
$(function () {
.load(function () {
// set the image hidden by default
$('#logo').hide();.fadeIn(3000);
}}
</script>
<link rel="stylesheet" href="challenge.css"/>
<title>Acme Widgets</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="logo" src="logo-smaller.jpg" />
</div>
<div id="nav">
navigation
</div>
<div id="leftCol">
left col
</div>
<div id="rightCol">
<div id="header2">
header 2
</div>
<div id="centreCol">
body text
</div>
<div id="rightCol2">
right col
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
采纳答案by Cool Hand Luke
I figure out the answer! You need to use the window.onload function as shown below. Thanks to Tec guy and Karim for the help. Note: You still need to use the document ready function too.
我想出答案！您需要使用 window.onload 函数，如下所示。感谢 Tec 家伙和 Karim 的帮助。注意：您仍然需要使用文档准备功能。
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
It also worked for me when placed right after the image...Thanks
在图像之后放置它也对我有用......谢谢
回答by Fenton
This thread seems unnecessarily controversial.
这个线程似乎不必要地引起争议。
If you really want to solve this question correctly, using jQuery, please see the solution below.
如果你真的想正确解决这个问题，使用jQuery，请看下面的解决方案。
The question is "jQuery How do you get an image to fade in on load?"
问题是“jQuery 如何让图像在加载时淡入淡出？”
First, a quick note.
首先，快速说明。
This is not a good candidate for $(document).ready...
这不是 $(document).ready 的好候选...
Why? Because the document is ready when the HTML DOM is loaded. The logo image will not be ready at this point - it may still be downloading in fact!
为什么？因为在加载 HTML DOM 时文档就准备好了。徽标图像此时还没有准备好 - 实际上它可能仍在下载！
So to answer first the general question "jQuery How do you get an image to fade in on load?" - the image in this example has an id="logo" attribute:
所以首先要回答一般问题“jQuery 如何让图像在加载时淡入？” - 本示例中的图像具有 id="logo" 属性：
$("#logo").bind("load", function () { $(this).fadeIn(); });
This does exactly what the question asks. When the image has loaded, it will fade in. If you change the source of the image, when the new source has loaded, it will fade in.
这正是问题所要求的。当图片加载完毕后，它会淡入。如果你改变了图片的来源，当新的来源加载后，它会淡入。
There is a comment about using window.onload alongside jQuery. This is perfectly possible. It works. It can be done. However, the window.onload event needs a particular bit of care. This is because if you use it more than once, you overwrite your previous events. Example (feel free to try it...).
有关于在 jQuery 旁边使用 window.onload 的评论。这是完全可能的。有用。可以办到。但是，window.onload 事件需要特别注意。这是因为如果您多次使用它，就会覆盖之前的事件。示例（随意尝试...）。
function SaySomething(words) {
alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
Of course, you wouldn't have three onload events so close together in your code. You would most likely have a script that does something onload, and then add your window.onload handler to fade in your image - "why has my slide show stopped working!!?" - because of the window.onload problem.
当然，您的代码中不会有三个 onload 事件如此接近。您很可能有一个脚本可以在加载时执行某些操作，然后添加 window.onload 处理程序以淡入您的图像 - “为什么我的幻灯片放映停止工作！！？” - 因为 window.onload 问题。
One great feature of jQuery is that when you bind events using jQuery, they ALL get added.
jQuery 的一大特色是，当您使用 jQuery 绑定事件时，它们都会被添加。
So there you have it - the question has already been marked as answered, but the answer seems to be insufficient based on all the comments. I hope this helps anyone arriving from the world's search engines!
所以你知道了 - 该问题已被标记为已回答，但根据所有评论，答案似乎不足。我希望这可以帮助任何来自世界搜索引擎的人！
回答by Traveling Tech Guy
You have a syntax error on line 5:
第 5 行出现语法错误：
$('#logo').hide();.fadeIn(3000);
Should be:
应该：
$('#logo').hide().fadeIn(3000);
回答by karim79
Simply set the logo's style to display:hiddenand call fadeIn, instead of first calling hide:
只需将徽标的样式设置为display:hidden并调用fadeIn，而不是首先调用hide：
$(document).ready(function() {
$('#logo').fadeIn("normal");
});
<img src="logo.jpg" style="display:none"/>
回答by Craig
To do this with multiple images you need to run though an .each()function. This works but I'm not sure how efficient it is.
要对多个图像执行此操作，您需要运行一个.each()函数。这有效，但我不确定它的效率如何。
$('img').hide();
$('img').each( function(){
$(this).on('load', function () {
$(this).fadeIn();
});
});
回答by J. Hendrix
window.onload is not that trustworthy.. I would use:
window.onload 不是那么值得信赖.. 我会使用：
<script type="text/javascript">
$(document).ready(function () {
$('#logo').hide().fadeIn(3000);
});
</script>
回答by BlissOfBeing
The key is to use $(window).load(function(){}so we know the image is loaded. Hide the image via the css function then fade it in using fadeIn:
关键是使用，$(window).load(function(){}所以我们知道图像已加载。通过css函数隐藏图像，然后使用fadeIn淡入：
$(function() {
$(window).load(function(){
$('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
});
});
Idea from: http://www.getpeel.com/
想法来自：http: //www.getpeel.com/
回答by Fran?ois Romain
Using Desandro's imagesloadedplugin
使用Desandro 的图片加载插件
1 - hide images in css:
1 - 在 css 中隐藏图像：
#content img {
display:none;
}
2 - fade in images on load with javascript:
2 - 使用 javascript 在加载时淡入图像：
var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
$(image.img).fadeIn();
});
回答by Max
Using the examples from Sohnee and karim79. I tested this and it worked in both FF3.6 and IE6.
使用 Sohnee 和 karim79 的示例。我对此进行了测试，它在 FF3.6 和 IE6 中都有效。
<script type="text/javascript">
$(document).ready(function(){
$("#logo").bind("load", function () { $(this).fadeIn('slow'); });
});
</script>
<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>
回答by user607972
OK so I did this and it works. It's basically hacked together from different responses here. Since there is STILLnot a clear answer in this thread I decided to post this.
好的，所以我这样做了，并且有效。它基本上是从这里的不同回应中拼凑起来的。由于在这个线程中仍然没有明确的答案，我决定发布这个。
<script type="text/javascript">
$(document).ready(function () {
$("#logo").hide();
$("#logo").bind("load", function () { $(this).fadeIn(); });
});
</script>
This seems to me to be the best way to go about it. Despite Sohnee's best intentions he failed to mention that the object must first be set to display:none with CSS. The problem here is that if for what ever reason the user's JS is not working the object will just never appear. Not good, especially if it's the frikin' logo.
在我看来，这是最好的方法。尽管 Sohnee 的意图是最好的，但他没有提到必须首先使用 CSS 将对象设置为 display:none。这里的问题是，如果由于某种原因用户的 JS 不工作，该对象将永远不会出现。不好，特别是如果它是 frikin' 标志。
This solution leaves the item alone in the CSS, and first hides, then fades it in all using JS. This way if JS is not working properly the item will just load as normal.
此解决方案将项目单独留在 CSS 中，首先隐藏，然后使用 JS 将其全部淡化。这样，如果 JS 无法正常工作，该项目将正常加载。
Hope that helps anyone else who stumbles into this google ranked #1 not-so-helpful thread.
希望能帮助那些偶然发现这个谷歌排名第一的不太有用的线程的人。
回答by Victor S
Like Sohne mentions, but I would add this:
就像 Sohne 提到的那样，但我要补充一点：
$("img").hide();
$("img").bind("load", function () { $(this).fadeIn(); });
or:
或者：
$("img").bind("load", function () {
$(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow");
});
