23

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>
TM.
  • 108,298
  • 33
  • 122
  • 127
Cool Hand Luke
  • 2,120
  • 9
  • 32
  • 51

13 Answers13

49

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!

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • $("#logo").bind("load", function () { $(this).fadeIn(); }); didn't work on me. I didn't wrap it up inside anything, just put it inside – tugberk Feb 19 '11 at 10:28
  • 1
    You have to take care about where this is on the page... if you place this line before the image is declared, you won't find it. If you place this line too far from where the image is declared, there is a race condition... maybe the image loads before the script gets called. – Fenton Feb 21 '11 at 10:13
  • 1
    $("#logo").bind("load", function () { $(this).fadeIn(); }); won't work if the image is cached by the browser, the load event will be fired before the listener being set. – Guillaume Flandre Dec 15 '11 at 10:44
  • First of all your "SaySomething" example makes no sense. Secondly, this fails when the image is cached. Check this thread for answers: http://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery – p3drosola Feb 03 '14 at 15:00
19

You have a syntax error on line 5:

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

Should be:

$('#logo').hide().fadeIn(3000);
Drew Noakes
  • 300,895
  • 165
  • 679
  • 742
Traveling Tech Guy
  • 27,194
  • 23
  • 111
  • 159
10

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"/>
karim79
  • 339,989
  • 67
  • 413
  • 406
6

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();
    });
});
Craig
  • 972
  • 3
  • 13
  • 38
  • 1
    This will create N event handlers, one for each image, which *may* not be very efficient. A better way would be to have one event handler that is assigned all elements concerned which can determine which is causing the onload: `$('img').load(function (event) { $(event.target).fadeIn(); });` – Thomas Nadin Feb 23 '13 at 12:01
5

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"/>
Max
  • 51
  • 1
  • 1
  • Quick note - don't put that in the document ready block... just make sure you put the script after the image. You don't want to cause a race between document ready and the image loading. – Fenton Jan 26 '11 at 16:13
  • @tugberk - if you have an example that isn't working, you are probably best posting a question as this seems to work for @Max... so you must be doing something differently. – Fenton Jun 27 '11 at 08:43
4

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

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
J. Hendrix
  • 57
  • 1
  • Please see my note on the document ready issue with this question - it's quite an important distinction. – Fenton Mar 26 '10 at 20:41
  • 1
    Why do you consider window.onload to not be trustworthy? – Dan Williams Sep 10 '10 at 20:53
  • 1
    Document ready isnt right for this function, it wait until the images are loaded, hides them and them fades them in , which is rather ugly – Blowsie Dec 20 '10 at 10:12
  • @Blowsie - document ready fires when the DOM is loaded, not when the images are loaded. document load fires when all of the DOM, images and other included ephemera has loaded. – Fenton Aug 09 '11 at 23:37
  • @Sohnee - Yeah, hence my comment "Document ready isnt right for this function" maybe the rest of my comment isnt clear. – Blowsie Aug 10 '11 at 07:21
  • @Blowsie, I was trying to clear up the confusion as it looked like you were suggesting that document ready waits for images to load, but it doesn't because it fires when the DOM is loaded, but before images are loaded. – Fenton Aug 11 '11 at 14:50
4

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();
});
François Romain
  • 13,617
  • 17
  • 89
  • 123
4

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/

BlissOfBeing
  • 625
  • 1
  • 6
  • 11
3

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.

user607972
  • 59
  • 1
  • Please read the comments on use of document ready for this purpose. Also, you say it should be hidden using CSS, but you also hide it using JavaScript - you don't need to do both and just using JavaScript means that people without JavaScript DO see an image, which is why I didn't suggest hiding it with CSS. Hope this helps. – Fenton Aug 09 '11 at 23:39
3

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"); 
});
Victor S
  • 5,098
  • 5
  • 44
  • 62
2

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.

Community
  • 1
  • 1
gillytech
  • 3,595
  • 2
  • 27
  • 44
2

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>
tugberk
  • 57,477
  • 67
  • 243
  • 335
-3

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

monsur
  • 45,581
  • 16
  • 101
  • 95
Cool Hand Luke
  • 2,120
  • 9
  • 32
  • 51