当前位置： 文江博客话题详情

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

发布于 2024-08-04 03:46:02 字数 1228 浏览 4 评论 0原文

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

All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can't managed to fadeIn on load please help. Sorry if this question has already been answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me.

Thanks.

Code:

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（13）

地狱即天堂 2024-08-11 03:46:02

这条线索似乎没有必要引起争议。

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

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

首先，快速说明一下。

这不是 $(document).ready 的良好候选者...

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

因此，首先要回答一般性问题“jQuery 如何让图像在加载时淡入？” - 此示例中的图像具有 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 事件。您很可能有一个执行 onload 操作的脚本，然后添加 window.onload 处理程序以淡入图像 - “为什么我的幻灯片停止工作！！？” - 因为 window.onload 问题。

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

现在你已经知道了 - 该问题已被标记为已回答，但根据所有评论，答案似乎不够充分。我希望这对来自世界各地搜索引擎的任何人都有帮助！

This thread seems unnecessarily controversial.

If you really want to solve this question correctly, using jQuery, please see the solution below.

The question is "jQuery How do you get an image to fade in on load?"

First, a quick note.

This is not a good candidate for $(document).ready...

Why? Because the document is ready when the HTML DOM is loaded. The logo image will not be ready at this point - it may still be downloading in fact!

So to answer first the general question "jQuery How do you get an image to fade in on load?" - the image in this example has an id="logo" attribute:

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

This does exactly what the question asks. When the image has loaded, it will fade in. If you change the source of the image, when the new source has loaded, it will fade in.

There is a comment about using window.onload alongside jQuery. This is perfectly possible. It works. It can be done. However, the window.onload event needs a particular bit of care. This is because if you use it more than once, you overwrite your previous events. Example (feel free to try it...).

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

Of course, you wouldn't have three onload events so close together in your code. You would most likely have a script that does something onload, and then add your window.onload handler to fade in your image - "why has my slide show stopped working!!?" - because of the window.onload problem.

One great feature of jQuery is that when you bind events using jQuery, they ALL get added.

So there you have it - the question has already been marked as answered, but the answer seems to be insufficient based on all the comments. I hope this helps anyone arriving from the world's search engines!

回复 原文
我只土不豪 2024-08-11 03:46:02

第 5 行有语法错误：

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

应该是：

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

You have a syntax error on line 5:

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

Should be:

$('#logo').hide().fadeIn(3000);
回复 原文
意中人 2024-08-11 03:46:02

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

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

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

Simply set the logo's style to display:hidden and call fadeIn, instead of first calling hide:

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

<img src="logo.jpg" style="display:none"/>
回复 原文
凝望流年 2024-08-11 03:46:02

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

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

To do this with multiple images you need to run though an .each() function. This works but I'm not sure how efficient it is.

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});
回复 原文
满意归宿 2024-08-11 03:46:02

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

Using the examples from Sohnee and karim79. I tested this and it worked in both FF3.6 and 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"/>
回复 原文
一身仙ぐ女味 2024-08-11 03:46:02

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

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

window.onload is not that trustworthy.. I would use:

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
回复 原文
埋葬我深情 2024-08-11 03:46:02

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

$(function() {

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

});

Idea from: < a href="http://www.getpeel.com/" rel="nofollow">http://www.getpeel.com/

The key is to use $(window).load(function(){} so we know the image is loaded. Hide the image via the css function then fade it in using fadeIn:

$(function() {

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

});

Idea from: http://www.getpeel.com/

回复 原文
肥爪爪 2024-08-11 03:46:02

使用Desandro的imagesloaded插件

1 - 在css中隐藏图像：

#content img { 
    display:none; 
}

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

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

Using Desandro's imagesloaded plugin

1 - hide images in css:

#content img { 
    display:none; 
}

2 - fade in images on load with javascript:

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});
回复 原文
人疚 2024-08-11 03:46:02

好的，我这样做了并且有效。它基本上是根据这里的不同回复拼凑在一起的。由于此帖子中仍然没有明确的答案，所以我决定发布此内容。

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

在我看来，这是最好的方法。尽管 Sohnee 的出发点是好的，但他没有提到必须首先使用 CSS 将对象设置为 display:none。这里的问题是，如果由于某种原因用户的 JS 无法工作，该对象将永远不会出现。不好，尤其是当它是那个该死的标志时。

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

希望这可以帮助任何其他偶然发现这个谷歌排名第一的不太有帮助的线程的人。

OK so I did this and it works. It's basically hacked together from different responses here. Since there is STILL not a clear answer in this thread I decided to post this.

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

This seems to me to be the best way to go about it. Despite Sohnee's best intentions he failed to mention that the object must first be set to display:none with CSS. The problem here is that if for what ever reason the user's JS is not working the object will just never appear. Not good, especially if it's the frikin' logo.

This solution leaves the item alone in the CSS, and first hides, then fades it in all using JS. This way if JS is not working properly the item will just load as normal.

Hope that helps anyone else who stumbles into this google ranked #1 not-so-helpful thread.

回复 原文
浊酒尽余欢 2024-08-11 03:46:02

就像 Sohne 提到的那样，但我会添加以下内容：

$("img").hide();

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

或者：

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

Like Sohne mentions, but I would add this:

$("img").hide();

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

or:

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});
回复 原文
誰認得朕 2024-08-11 03:46:02

我尝试了以下一种方法，但没有成功；

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

I tried the following one but didn't work;

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

bu the following one worked just fine;

<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>
回复 原文
画离情绘悲伤 2024-08-11 03:46:02

CSS3 + jQuery 解决方案

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

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

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

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会搜索每一个有该类的item，并为其绑定load事件。完成后，不透明度将设置为 1，图像将淡入。如果图像已存储在浏览器缓存中，它将立即淡入。

将其用于产品列表页面。

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

CSS3 + jQuery Solution

I wanted a solution that did NOT employ jQuery's fade effect as this causes lag in many mobile devices.

Borrowing from Steve Fenton's answer I have adapted a version of this that fades the image in with the CSS3 transition property and opacity. This also takes into account the problem of browser caching, in which case the image will not show up using CSS.

Here is my code and 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');
    }
});

What's happening here is the image (or any element) that you want to fade in when it loads will need to have the .fade-in-on-load class applied to it beforehand. This will assign it a 0 opacity and assign the transition effect, you can edit the fade speed to taste in the CSS.

Then the JS will search each item that has the class and bind the load event to it. Once done, the opacity will be set to 1, and the image will fade in. If the image was already stored in the browser cache already, it will fade in immediately.

Using this for a product listing page.

This may not be the prettiest implementation but it does work well.

回复 原文
不再让梦枯萎 2024-08-11 03:46:02

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

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

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

I figure out the answer! You need to use the window.onload function as shown below. Thanks to Tec guy and Karim for the help. Note: You still need to use the document ready function too.

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

It also worked for me when placed right after the image...Thanks

回复 原文
~没有更多了~

关于作者

楠木可依

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文