How to tell if an item is on the screen (WITHOUT using scrollbars)...

Question

Hey,

Is there a way that I can only render the elements on the screen and leave those others to be rendered when they come into view?

Basically like 3d culling, but on a website ^.^

[edit] I take it that this isn't possible then? [/edit]
[edit2] I tried LazyLoad (jQuery plugin) but that initialised on windows scroll [/edit2]
[edit3] Sorry to keep bumping this, but I am tearing my hair out [/edit3]

Answer 1

The Lazy Loader plugin will do the trick for images (demo here).

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.

This plugin is based on YUI ImageLoader, so if you're not locked in to jQuery you might find using the original framework even better, depending on your specific use case.

Answer 2

have you tried lazyload ? http://www.appelsiini.net/projects/lazyload

Answer 3

I'd suggest you use something like this: http://www.appelsiini.net/projects/lazyload - he has a demo page with the fade-in effect like mashable.com if that's what you're looking for.

You could always open it up and take only what you need from it, but it depends on your site/load requirements.