使用 jquery 使图像在图像加载时淡入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1700864/
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
Making images fade in on image load using jquery
提问by James
I have a page full of images and I want each of them to fade in when loaded. I have the following code which works but seems buggy, basically sometimes not all the image fade in.
我有一个充满图像的页面，我希望每个图像在加载时淡入。我有以下代码可以工作但似乎有问题，基本上有时并非所有图像都淡入淡出。
Does anyone have any suggestions of how to improve this.
有没有人对如何改进这一点有任何建议。
Thanks
谢谢
$('.contentwrap img').hide().load(function () {
$(this).fadeIn(1000);
});
回答by bobince
sometimes not all the image fade in.
有时并非所有图像都淡入淡出。
Yeah, this is typically a fairly basic problem: some images finish loading before you've assigned them a load event handler. This is especially likely when the images are cached.
是的，这通常是一个相当基本的问题：一些图像在您为它们分配加载事件处理程序之前完成加载。当图像被缓存时，这种情况尤其可能发生。
If the images are in the HTML the only reliable way is, unfortunately, to include an (extremely ugly) inline onload attribute:
不幸的是，如果图像在 HTML 中，唯一可靠的方法是包含一个（非常难看的）内联 onload 属性：
<img src="..." alt="..." onload="$(this).fadeIn();">
回答by Fint
It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can test the value of the image's .complete property.
如果图像是从浏览器缓存加载的，则可能不会触发 load 事件。为了解决这种可能性，我们可以测试图像的 .complete 属性的值。
$(document).ready(function() {
$('img').hide();
$('img').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
});
回答by Ted Rysz
Place this bit of code in the section of the site:
将这段代码放在站点的部分中：
<script>
$('body').ready(function() {
$('img').hide();
$('img').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn(2000);
});
}
});
});
</script>
This may not be the most eloquent solution, but it gets the job done. If you would like to see an example of it in action, check out this siteI used it for.
这可能不是最有说服力的解决方案，但它可以完成工作。如果您想查看它的实际示例，请查看我使用它的站点。
回答by user607972
I just answered this over at this thread: jQuery How do you get an image to fade in on load?
我刚刚在这个线程上回答了这个问题：jQuery 如何让图像在加载时淡入淡出？
Works for me!
为我工作！
回答by Funka
You could first make sure that your images are hidden by default (eliminating need for your jQuery hidecalls) with some CSS,
您可以首先hide使用一些 CSS确保默认情况下隐藏您的图像（消除对 jQuery调用的需要），
.contentwrap img {
display:none;
}
And then, in your document.ready, you could try the following. I'll admit there will be some redundancies here in that some images may (behind the scenes) be trying to fade in twice, but the end result will look just the same. This is the tradeoff I'll admit in trying to give a simple answer to this.
然后，在您的 document.ready 中，您可以尝试以下操作。我承认这里会有一些冗余，因为一些图像可能（在幕后）试图淡入两次，但最终结果看起来是一样的。这是我在试图对此给出一个简单答案时承认的权衡。
The situation will be that in your document.ready, some images may have loaded (especially those that were already cached) and some may yet be pending.
情况是，在您的 document.ready 中，某些图像可能已加载（尤其是那些已经缓存的图像），而有些图像可能尚未完成。
// fade in images already loaded:
$('.contentwrap img').fadeIn(1000);
// and tell pending images to do the same, once they've finished loading:
$('.contentwrap img').load(function () {
$(this).fadeIn(1000);
});
Since jQuery will "stack" your animation effects, once something is fully faded-in, you can call fadeIn on it again, and nothing should (visibly) happen.
由于 jQuery 会“堆叠”您的动画效果，因此一旦某些内容完全淡入，您可以再次对其调用淡入淡出，并且不会（明显）发生任何事情。
If this was unacceptable, you could probably devise some more complex way of checking which images have been faded in and which have not, before you set the load event on them.
如果这是不可接受的，您可能可以设计一些更复杂的方法来检查哪些图像已经淡入，哪些没有，然后再为它们设置加载事件。
Good luck!
祝你好运！
回答by Nosredna
I recently dealt with this mess. I answered this similar question, but it's not exactly what you're asking...
我最近处理了这个烂摊子。我回答了这个类似的问题，但这不完全是你要问的......
Get the real width and height of an image with JavaScript? (in Safari/Chrome)
回答by justin
put your code inside of this function. If you use $(document) it works as soon as the dom is loaded. If you use body it starts once the body is fully loaded. That way your images will always fade in after the body is loaded.
把你的代码放在这个函数中。如果您使用 $(document) 它会在加载 dom 后立即工作。如果您使用 body，它会在 body 完全加载后启动。这样，您的图像将始终在加载正文后淡入。
$('body').ready(function() {
//your code here
});
回答by Guillaume Flandre
To deal with cached images, bobince's solution works, but as he said, it's quite ugly.
为了处理缓存图像，bobince 的解决方案有效，但正如他所说，它非常难看。
Another solution would be to hide your images in css and use the following javascript:
另一种解决方案是在 css 中隐藏您的图像并使用以下 javascript：
$(window).load(function(){
$('.contentwrap img').not(':visible').fadeIn(1000);
});
function showImages() {
$('.contentwrap img').load(function () {
$(this).fadeIn(1000);
});
});
showImages();
This way, most images are loaded properly, and if they were cached, and hidden right away (the load function not having time to be fired), the page's load event will make them appear. The page's load event ensures that everything was loaded.
这样，大多数图像都被正确加载，如果它们被缓存并立即隐藏（加载函数没有时间被触发），页面的加载事件将使它们出现。页面的加载事件确保所有内容都已加载。
回答by LiamB
are you calling that function in the Document.ready?
你是在 Document.ready 中调用那个函数吗？
$(document).ready(function() {
// put all your jQuery goodness in here.
});
http://www.learningjquery.com/2006/09/introducing-document-ready
http://www.learningjquery.com/2006/09/introducing-document-ready
回答by Fint
I use the cool script of David DeSandro to check if images have loaded.
(e.g. you can write a function which adds a class to the loaded images, so they will fade in using css transition. check it out:
http://desandro.github.io/imagesloaded/
我使用 David DeSandro 的酷脚本来检查图像是否已加载。（例如，您可以编写一个函数，为加载的图像添加一个类，因此它们将使用 css 过渡淡入。查看：http:
//desandro.github.io/imagesloaded/
