Forums

brent_james

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?

Schmotty

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:


<img onload="this.style.opacity='1';" src="image.jpg" />

http://jsfiddle.net/UtnHS/

TheDoc

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

brent_james

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?

TheDoc

Ahhhhh - I see what you're doing.

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

brent_james

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

TheDoc

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.

Schmotty

@brent_james

what cms/blog are you using?

brent_james

tumblr

brent_james

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

<script type="text/javascript">

    $(document).imagesLoaded(function(){
        
      $(".post").css("opacity", "0.01");
  $(".post").fadeTo(500, 1).show();
 
});

</script>

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?

brent_james

Does external script override script directly in the page?

Hompimpa

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

brent_james

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.

Hompimpa

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

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.masonry.min.js"></script>
<script type="text/javascript">
// Code here...
</script>

brent_james

{solved} You are a lifesaver, thanks.

lauravonburns

so does that mean this is right?

I can't get this code to work. (please correct it for me, I'm not sure which part needs changing, I'v followed everything here!)

lauravonburns

:)

lauravonburns

$(document).imagesLoaded(function(){ $(".post").css("opacity", "0.01"); $(".post").fadeTo(500, 1).show(); } #pagination { ... clear:both; });

lauravonburns

I can't even paste it in here properly. :/

$(document).imagesLoaded(function(){ $(".post").css("opacity", "0.01"); $(".post").fadeTo(500, 1).show(); } #pagination { ... clear:both; });

treehouse : what would you like to learn today?

Forums

[Solved] Fade in images onload