Question

I have a infinite scroll script which works for my tumblr.
It’s loading images as I scroll down the page.
However I’m looking to have the images fade in rather than suddenly appear.

I’ve found this awesome plugin called waypoints which does this sort of thing. And it works, but only on the first loaded images. After that, it’s not recognising the newly loaded images.

I know that “live” only works on certain jQuery functions. And bind might be better as you can use custom functions. But then i still apparently have to trigger the script, and this is what i dont know how to do. This would mean i’d have to hack the tumblr script which does the infinite scroll, and it’s scary in there, javascript rather than jQuery.

Maybe you could recommend a better way of doing this?

Here is the code that works for the first ten images:

$('.theImage').waypoint(function() {
   $(this).animate({opacity: 1}, 'slow');
});

I wish i could just do something like this:

$(‘.theImage’).bind(“waypoint”, function() {
$(this).animate({opacity: 1}, ‘slow’);
});

Thank you.

PS the content is miiiiildly nsfw. In fact its sfw since one mildly sexy picture is not even viewable and it’s all the way at the bottom. Cheers.

Answer 1

It’s not that live doesn’t work with custom events, but more that Waypoints only fires it’s event on elements that have had .waypoint() called on it. So you would need to make this call after the new content has loaded regardless.

Since hacking the infinitescroll script is out of the question, I suggest you try using the jquery.inview plugin instead of Waypoints. The way inview is structured it creates an event that is triggered by every element so you can use .live, .delegate.