Question

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

感谢。

代码：

<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>

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");
});

<img src="logo.jpg" style="display:none"/>

Answer 4

要对多个图像执行此操作，您需要运行.each()功能。这有效，但我不确定它的效率如何。

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

Answer 5

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

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>

Answer 6

使用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"/>

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's imagesloaded插件

1 - 隐藏css中的图像：

#content img { 
    display:none; 
}

2 - 使用javascript加载图片：

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

Answer 9

好的，所以我做了这个，它的确有效。它基本上是从这里的不同反应中共同攻击的。由于 STILL 在这个帖子中不是一个明确的答案我决定发布这个。

<script type="text/javascript">
  $(document).ready(function () {
    $("#logo").hide();
    $("#logo").bind("load", function () { $(this).fadeIn(); });
  });
</script>

在我看来，这是最好的方法。尽管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

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

    <span style="display: none;" id="doneimg">
        <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
    </span>

    <script type="text/javascript">
        //$(document).ready(function () {
            $("#doneimg").bind("load", function () { $(this).fadeIn('slow'); });
        //});
    </script>

以下一个工作正常;

<script type="text/javascript">
        $(document).ready(function () {
            $('#doneimg').fadeIn("normal");
        });
</script>

            <span style="display: none;" id="doneimg">
                <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
            </span>

Answer 12

CSS3 + jQuery解决方案

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

借用Steve Fenton's answer我改编了一个版本，用CSS3过渡属性和不透明度淡化图像。这也考虑了浏览器缓存的问题，在这种情况下，图像不会使用CSS显示。

这是我的代码和working fiddle：

<强> HTML

<img src="http://placehold.it/350x150" class="fade-in-on-load">

<强> CSS

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

jQuery Snippet

$(".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的帮助。注意：您仍然需要使用文档就绪功能。

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

在图片放置后，它对我也有用...谢谢

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

13 个答案: