jQuery How do you get an image to fade in on load?-第2页回答

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>

标签： jquery onload fadein

13条回答

兄弟一词,经得起流年.

2楼-- · 2019-01-06 14:38

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!

0人赞添加讨论(0) 举报

我命由我不由天

3楼-- · 2019-01-06 14:39

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

0人赞添加讨论(0) 举报

戒情不戒烟

4楼-- · 2019-01-06 14:45

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.

0人赞添加讨论(0) 举报

Luminary・发光体

5楼-- · 2019-01-06 14:46

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

0人赞添加讨论(0) 举报

Ridiculous、

6楼-- · 2019-01-06 14:50

You have a syntax error on line 5:

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

Should be:

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

0人赞添加讨论(0) 举报

淡お忘

7楼-- · 2019-01-06 14:51

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/

0人赞添加讨论(0) 举报

jQuery How do you get an image to fade in on load?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间