Grow your CSS skills. Land your dream job.

Fade in images onload

  • # May 23, 2012 at 5:36 pm

    I researched a couple different sites and have tried a few scripts, but is there a simple script I can add to a page to have the #content images fade in while they load?

    instead of seeing the images jump around while they load?

    # May 23, 2012 at 6:14 pm

    CSS


    img {opacity:0;
    -moz-transition: opacity 2s; /* Firefox 4 */
    -webkit-transition: opacity 2s; /* Safari and Chrome */
    -o-transition: opacity 2s;
    transition: opacity 2s;
    }​

    html:



    http://jsfiddle.net/UtnHS/

    # May 23, 2012 at 6:30 pm

    You’ll want to use something like ImagesLoaded or Lazy Load.

    # May 23, 2012 at 7:26 pm

    I tried the css and got it to sort of work, but I’m not sure how to insert the html because it is for multiple photo posts. Is there a way to insert it properly into the {block:Photo} post area?

    # May 23, 2012 at 7:54 pm

    Ahhhhh – I see what you’re doing.

    Just set the content’s opacity to zero, then in your Masonry callback set it to 1.

    # May 23, 2012 at 8:37 pm

    K i get ho to set opacity for the content, but sorry I’m not sure how to set a callback with Masonry.

    # May 23, 2012 at 11:43 pm

    Looks like Masonry doesn’t have a ‘callback’ per se, so you can do this:

    $container.imagesLoaded(function() {
    $('#content').masonry();
    $("#content").animate({opacity: 1});
    });

    You’ll need to change the selectors to whatever you are using – this is just from a theme I did.

    # May 24, 2012 at 11:17 am

    @brent_james

    what cms/blog are you using?

    # May 24, 2012 at 12:48 pm

    tumblr

    # May 24, 2012 at 4:15 pm

    I am really new with script and jquery so bare with me.
    This what I have:

    The concept I am going for is the page starts out almost hidden then fades in to opacity:1 while loading, but whenever I try adding a script it just doesn’t apply to the layout. Is there something overriding it…maybe?

    # May 25, 2012 at 6:45 pm

    Does external script override script directly in the page?

    # May 26, 2012 at 12:02 am

    I would suggest using .show(), when the image has been loaded, trigger the masonry:

    img.photo {display:none;}
    $(function() {
    $('img.photo').one("load", function() {
    $(this).show(1000, function() { // Show the image when loaded
    $(this).parents('#content').masonry({ // After that, trigger the .masonry()
    itemSelector:"div.post",
    isAnimated:true
    });
    });
    }).each(function() {
    if(this.complete) {
    $(this).load();
    }
    });
    });

    PS:Add clear:both to your pagination:

    #pagination {
    ...
    clear:both;
    }
    # May 26, 2012 at 2:43 am

    Hompimpa thank you!

    This has been the closest anyone has come to getting this to work, when the page loads i see the fadein effect on one of the elements see here, but the actual photos still aren’t showing up once the page loads.

    # May 26, 2012 at 7:31 am

    Try to put the JQuery and plugin before that function above. Like this:



    # May 26, 2012 at 1:25 pm

    {solved} You are a lifesaver, thanks.

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".