Fade in images onload

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

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

[brent_james]

tumblr

[brent_james]

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?

[brent_james]

Does external script override script directly in the page?

[Taufik Nurrohman]

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.

[Taufik Nurrohman]

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

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

:)

[Author]

Posts