How do I delay a .gif image until the user scrolls down to it?

Question

I have multiple .gif files that I want to post on a forum, it's powered by myBB. Anyways, I want these to load sequentially as the user scrolls. E.g first .gif loads, user scrolls down, second .gif loads. I've been searching for days and I still can not get it. Thanks

Solution 1

The name of the feature that you are looking for is called "lazy load". The technique typically works by initially showing a 1x1 transparent placeholder, and then using JavaScript to swap it out for the real image on scroll.

Here are some sites that provide code to do this for you:

• http://css-tricks.com/snippets/javascript/lazy-loading-images/ -- About 60 lines of Javascript
• http://www.appelsiini.net/projects/lazyload - A jQuery plugin
• http://luis-almeida.github.io/unveil/ -- Another jQuery plugin

For this to work, you must be able to alter the forum software to include the required javascript in the page. You won't be able to do this all within a forum post.

Solution 2

Consider using Discourse instead, it's free, open-source and superior to myBB in so many ways. Most importantly it supports lazy-loading. The Discourse project is headed up by Jeff Atwood one of the founders of the Stack Exchange network.

Comments

[Admin]

Please let us know why you want to do this - reason being their's a difference between loading an element and delaying a element, or hiding a element..... As you can animate the element when visible but the element could of loaded prior to user scrolling down for example.