使用jquery使图像在图像加载时淡入
我有一个充满图像的页面，我希望每个图像在加载时淡入。 我有以下代码可以工作，但似乎有问题，基本上有时不是所有的图像淡入。
有没有人有任何建议如何改善这一点。
谢谢
$('.contentwrap img').hide().load(function () { $(this).fadeIn(1000); }); 有时不是所有的图像都会淡入。
是的，这通常是一个相当基本的问题：一些图像在为它们分配加载事件处理程序之前完成加载。 当图像被缓存时，这尤其可能。
如果图像是在HTML中，遗憾的是，唯一可靠的方法是包含（非常难看的）内联onload属性：
如果从浏览器缓存加载图像，则可能不会触发加载事件。 为了解释这种可能性，我们可以测试图像的.complete属性的值。
$(document).ready(function() { $('img').hide(); $('img').each(function(i) { if (this.complete) { $(this).fadeIn(); } else { $(this).load(function() { $(this).fadeIn(); }); } }); });
将这段代码放在网站的部分：
这可能不是最有说服力的解决方案，但它可以完成工作。 如果您想查看它的实例，请查看我用过它的网站 。
你可以首先确保你的图像默认隐藏（不需要你的jQuery hide调用）和一些CSS，
.contentwrap img { display:none; }
然后，在您的document.ready中，您可以尝试以下操作。 我承认这里会有一些冗余，因为有些图像可能（在幕后）尝试淡入两次，但最终结果看起来是一样的。 这是我试图给出一个简单答案的承认。
情况将是在您的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); });
由于jQuery将“堆叠”你的动画效果，一旦完全淡入，你可以再次调用fadeIn，并且不应该（明显地）发生。
如果这是不可接受的，那么在设置加载事件之前，您可能会设计一些更复杂的方法来检查哪些图像已经淡入而哪些图像已经淡入。
祝好运！
我刚刚在这个post中回答了这个问题： jQuery如何让图像在加载时淡入？
适合我！
你在Document.ready中调用该函数吗？
$(document).ready(function() { // put all your jQuery goodness in here. });
http://www.learningjquery.com/2006/09/introducing-document-ready
我最近处理了这个烂摊子。 我回答了类似的问题，但这并不是你要问的https://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery/…https://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery/…
使用JavaScript获取图像的真实宽度和高度？ （在Safari / Chrome中）
把你的代码放在这个函数里面。 如果您使用$（文档），它会在加载dom后立即生效。 如果你使用身体，它会在身体完全装满后开始。 这样，您的图像将在加载主体后始终淡入。
$('body').ready(function() { //your code here });
为了处理缓存的图像，bobince的解决方案有效，但正如他所说的那样，它非常难看。
另一种解决方案是在css中隐藏您的图像并使用以下javascript：
$(window).load(function(){ $('.contentwrap img').not(':visible').fadeIn(1000); }); function showImages() { $('.contentwrap img').load(function () { $(this).fadeIn(1000); }); }); showImages();
这样，大多数图像都被正确加载，如果它们被缓存并立即隐藏（加载函数没有时间被触发），页面的加载事件将使它们出现。 页面的加载事件可确保加载所有内容。
我使用David DeSandro的酷脚本来检查图像是否已加载。 （例如，您可以编写一个函数，为加载的图像添加一个类，因此它们将使用css转换淡入。检查出来：
http://desandro.github.io/imagesloaded/
您可以拍摄所有图像并将它们放入一个图像中并将其淡入，然后它们全部同时进入，这将是一个大文件。 这取决于你想要用它。