It’s Inview’s turn

Inview was totally new for me. I had never come across it before but it turned out pretty simple to implement, only a little bit tricky. This plugin essentially detects if an object is in view or not, that is, being displayed at the moment in the size of your browser’s window. You could actually use it for multiple tasks, such as reducing http requests and traffic on servers, tracking —eg. see if visitors get to read the entire article—, or for infinite-scroll purposes like this one.

See how the LolCats keep appearing smoothly?

To call the Inview plugin, the jQuery .on() function is used to attach an event handler to each item element as they come into view, as detected by inview. This is achieved by using the following code:

$(document).on("inview", ".item", function(e) {
     var $this = $(this);
     if(!$this.hasClass('loaded')) {

What this script does is toggle the css property visibility of a hidden object and then hide it with jQuery, only to be able to show it with any given effect or even with animate and any easing function. Goes without saying that is doesn’t have to be fadeIn.

Troubleshooting —all images blink when loading

And that has to be because we forgot to hide the element with css first! If it is already visible when loaded, then we hide it with jQuery and then fade it in, the effect is thoroughly disturbing. So let’s add this into our CSS:

.item {
      visibility: hidden;

and remember to take away this line from your Inifnite Scroll apended method, because you are now using Inview to reveal your images instead:

$newElems.css('visibility' , 'visible');

Be careful to know which id, class or tag you should be hiding. In this case it should be .item because that’s the element referenced as $(this) in the Inview call. Hiding .item img won’t do the trick.

Follow to next page to set up Lightbox.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.