jQuery如何让图像在加载时淡入？

我想做的就是在页面加载时淡化我的徽标。 我今天是jQuery的新手，我无法设法在加载时淡出请帮忙。 对不起，如果这个问题已经得到解答，我已经看了一眼，并尝试针对不同的问题调整其他答案，但似乎没有任何工作，它开始让我感到沮丧。

谢谢。

码：

 $(function () { .load(function () { // set the image hidden by default $('#logo').hide();.fadeIn(3000); }}      
 
  
 
 navigation 
 
 left col 
 
 
 header 2 
 
 body text 
 
 right col 
 
 
 footer 
 
   

Answer 1

这个话题似乎不必要地引起争议。

如果你真的想用jQuery正确解决这个问题，请参阅下面的解决方案。

问题是“jQuery如何让图像在加载时淡入？”

首先，快速说明。

这不是$（document）.ready的好候选人。

为什么？ 因为在加载HTML DOM时文档已准备就绪。 此时徽标图像还没有准备好 – 实际上它可能仍在下载！

所以首先回答一般问题“jQuery如何让图像在加载时淡入？” – 此示例中的图像具有id =“logo”属性：

 $("#logo").bind("load", function () { $(this).fadeIn(); }); 

这正是问题所要求的。 当图像加载时，它将淡入。如果更改图像的来源，当新源加载时，它将淡入。

有关于使用window.onload和jQuery的评论。 这是完全可能的。 有用。 可以办到。 但是，window.onload事件需要特别小心。 这是因为如果您多次使用它，则会覆盖以前的事件。 示例（随意尝试…）。

 function SaySomething(words) { alert(words); } window.onload = function () { SaySomething("Hello"); }; window.onload = function () { SaySomething("Everyone"); }; window.onload = function () { SaySomething("Oh!"); }; 

当然，您的代码中不会有三个onload事件。 您很可能有一个脚本可以执行onload，然后添加window.onload处理程序以淡入您的图像 – “为什么我的幻灯片停止工作!!？” – 因为window.onload问题。

jQuery的一个重要特性是当你使用jQuery绑定事件时，它们都会被添加。

所以你有它 – 问题已被标记为已回答，但根据所有评论，答案似乎不够。 我希望这可以帮助任何来自世界搜索引擎的人！

Answer 2

第5行有语法错误：

 $('#logo').hide();.fadeIn(3000); 

应该：

 $('#logo').hide().fadeIn(3000); 

Answer 3

只需设置徽标的样式即可display:hidden并调用fadeIn ，而不是先调用hide ：

 $(document).ready(function() { $('#logo').fadeIn("normal"); });  

Answer 4

要使用多个图像执行此操作，您需要通过.each()函数运行。 这有效，但我不确定它的效率如何。

 $('img').hide(); $('img').each( function(){ $(this).on('load', function () { $(this).fadeIn(); }); }); 

Answer 5

window.onload不值得信赖..我会用：

Answer 6

使用Sohnee和karim79的例子。 我测试了它，它在FF3.6和IE6都有效。

Answer 7

关键是使用$(window).load(function(){}所以我们知道图像被加载。通过css函数隐藏图像然后使用fadeIn淡化它：

 $(function() { $(window).load(function(){ $('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000); }); }); 

想法来自： http ： //www.getpeel.com/

Answer 8

使用Desandro的imagesloaded插件

1 – 隐藏css中的图像：

 #content img { display:none; } 

2 – 使用javascript在加载时淡入图像：

 var imgLoad = imagesLoaded("#content"); imgLoad.on( 'progress', function( instance, image ) { $(image.img).fadeIn(); }); 

Answer 9

好的，所以我做了这个，它的工作原理。 它基本上是从不同的响应一起被黑客攻击的。 由于在这个post中仍然没有明确的答案我决定发布这个。

在我看来，这是最好的方法。 尽管Sohnee有最好的意图，但他没有提到必须先将对象设置为display：none with CSS。 这里的问题是，如果由于任何原因用户的JS不工作，该对象将永远不会出现。 不好，特别是如果它是frikin’标志。

这个解决方案将项目单独留在CSS中，并首先隐藏，然后使用JS将其淡化。 这样，如果JS无法正常工作，该项目将正常加载。

希望能帮助其他任何绊倒这个谷歌的人排名第一的不那么有用的主题。

Answer 10

像Sohne提到的那样，但我想补充一点：

 $("img").hide(); $("img").bind("load", function () { $(this).fadeIn(); }); 

要么：

 $("img").bind("load", function () { $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); }); 

Answer 11

我尝试了以下但没有奏效;

下面的一个工作得很好;

Answer 12

CSS3 + jQuery解决方案

我想要一个不采用jQuery淡入淡出效果的解决方案，因为这会导致许多移动设备出现延迟。

借用史蒂夫芬顿的答案，我已经改编了一个版本，用CSS3过渡属性和不透明度淡化图像。 这也考虑了浏览器缓存的问题，在这种情况下，图像不会使用CSS显示。

这是我的代码和工作小提琴 ：

HTML

CSS

 .fade-in-on-load { opacity: 0; will-change: transition; transition: opacity .09s ease-out; } 

jQuery代码段

 $(".fade-in-on-load").each(function(){ if (!this.complete) { $(this).bind("load", function () { $(this).css('opacity', '1'); }); } else { $(this).css('opacity', '1'); } }); 

这里发生的是你想要在加载时淡入的图像（或任何元素）需要事先将.fade-in-on-load类应用于它。 这将为其指定0不透明度并指定过渡效果，您可以在CSS中编辑淡入淡出速度。

然后，JS将搜索具有该类的每个项目并将load事件绑定到该项目。 完成后，不透明度将设置为1，图像将淡入。如果图像已经存储在浏览器缓存中，它将立即淡入。

将其用于产品列表页面。

这可能不是最漂亮的实现，但它确实运行良好。

Answer 13

我找到了答案！ 您需要使用window.onload函数，如下所示。 感谢Tec guy和Karim的帮助。 注意：您仍然需要使用文档就绪function。

 window.onload = function() {$('#logo').hide().fadeIn(3000);}; $(function() {$("#div").load(function() {$('#div').hide().fadeIn(750);); 

当它放在图像后面时，它对我也有用…谢谢