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

【问题标题】：jQuery How do you get an image to fade in on load?jQuery 如何让图像在加载时淡入？
【发布时间】：2010-11-25 21:55:45
【问题描述】：

我要做的就是在页面加载时淡入我的徽标。我今天是 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>

【问题讨论】：

标签： jquery onload fadein

【解决方案1】：

第 5 行有语法错误：

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

应该是：

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

【讨论】：

哈哈。您修复了故意复制的错误，现在两行是相同的。这就是你一年后回来时会发生的事情。
我第一次在 SO 上编辑了一些东西并故意添加了一个错误:)
@Drew 非常感谢 - 历史 > 准确性 :)

【解决方案2】：

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

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

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

【讨论】：

@Cool Hand Luke UK - 您尝试过@Traveling Tech Guy 的解决方案吗？
请参阅我关于此问题的文档就绪问题的说明 - 这是一个非常重要的区别。

【解决方案3】：

我知道答案了！您需要使用如下所示的 window.onload 函数。感谢技术人员和卡里姆的帮助。注意：您仍然需要使用文档准备功能。

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

将它放在图像之后也对我有用...谢谢

【讨论】：

如果你使用 jQuery，你不应该设置 .onload。

【解决方案4】：

window.onload 不是那么值得信赖。我会使用：

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

【讨论】：

请参阅我关于此问题的文档就绪问题的说明 - 这是一个非常重要的区别。
为什么你认为 window.onload 不可信？
文档准备不适合这个功能，它等到图像加载完毕，隐藏它们，然后它们淡入，这是相当丑陋的
@Blowsie - 在加载 DOM 时触发文档就绪，而不是在加载图像时。当所有 DOM、图像和其他包含的临时文件都已加载时，将触发文档加载。
@Sohnee - 是的，因此我的评论“文档准备不适合此功能”也许我的其余评论不清楚。

【解决方案5】：

这个话题似乎有不必要的争议。

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

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

首先，简要说明一下。

这不适合 $(document).ready...

为什么？因为在加载 HTML DOM 时文档就准备好了。徽标图像此时尚未准备好 - 实际上它可能仍在下载！

所以首先回答一般性问题“jQuery How do you get an image to fade in on load?” - 此示例中的图像具有 id="logo" 属性：

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

这正是问题所要求的。当图片加载完毕后，淡入。如果你改变图片的来源，当新的来源加载后，它会淡入。

有一条关于在 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!"); };

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

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

所以你有它 - 问题已被标记为已回答，但基于所有 cmets，答案似乎不足。我希望这可以帮助任何来自世界搜索引擎的人！

【讨论】：

$("#logo").bind("load", function () { $(this).fadeIn(); });对我不起作用。我没有把它包在任何东西里，只是把它放在
您必须注意它在页面上的位置...如果您在声明图像之前放置此行，您将找不到它。如果您将此行放置在离声明图像的位置太远的位置，则会出现竞争条件...可能在调用脚本之前加载图像。
$("#logo").bind("load", function () { $(this).fadeIn(); });如果图像被浏览器缓存，则无法工作，加载事件将在设置侦听器之前触发。
首先，您的“SaySomething”示例毫无意义。其次，当图像被缓存时，这会失败。检查此线程以获得答案：stackoverflow.com/questions/1700864/…

【解决方案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"/>

【讨论】：

快速注意——不要把它放在文档就绪块中......只要确保你把脚本放在图像之后。您不希望在文档准备好和图像加载之间造成竞争。
@tugberk - 如果您有一个不起作用的示例，您最好发布一个问题，因为这似乎对@Max 有效......所以您必须做一些不同的事情。跨度>

【解决方案7】：

好的，所以我做了这个并且它有效。它基本上是从这里的不同响应中破解的。由于此线程中 STILL 没有明确的答案，因此我决定发布此内容。

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

在我看来，这是最好的方法。尽管 Sohnee 的意图是最好的，但他没有提到必须首先使用 CSS 将对象设置为 display:none。这里的问题是，如果出于某种原因，用户的 JS 无法正常工作，则该对象将永远不会出现。不好，特别是如果它是 frikin' 标志。

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

希望对偶然进入这个谷歌排名第一的不太有用的线程的人有所帮助。

【讨论】：

请阅读 cmets 以了解为此目的准备的文档的使用情况。另外，你说它应该使用 CSS 隐藏，但你也使用 JavaScript 隐藏它——你不需要两者都做，只使用 JavaScript 意味着没有 JavaScript 的人会看到图像，这就是我不建议隐藏的原因它与CSS。希望这会有所帮助。

【解决方案8】：

我尝试了以下一种但没有奏效；

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

【讨论】：

【解决方案9】：

就像 Sohne 提到的，但我想补充一下：

$("img").hide();

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

或：

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

【讨论】：

【解决方案10】：

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

$(function() {

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

});

创意来自：http://www.getpeel.com/

【讨论】：

【解决方案11】：

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

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

【讨论】：

这将创建 N 个事件处理程序，每个图像一个，可能效率不高。一种更好的方法是让一个事件处理程序分配给所有相关元素，这些元素可以确定导致加载的原因：$('img').load(function (event) { $(event.target).fadeIn(); });

【解决方案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 片段

$(".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 将搜索每个具有该类的项目并将加载事件绑定到它。完成后，不透明度将设置为 1，图像将淡入。如果图像已经存储在浏览器缓存中，它将立即淡入。

将其用于产品列表页面。

这可能不是最漂亮的实现，但效果很好。

【讨论】：

关于如何使淡入淡出作为一个序列发生的任何想法？

【解决方案13】：

使用Desandro's imagesloaded插件

1 - 在 css 中隐藏图像：

#content img { 
    display:none; 
}

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

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

【讨论】：