Smooth image loading with a bit of JS.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

JS.Smooth Loading

Image loading method with a bit of jQuery. Should be easy enough to convert to a non-API dependent method.

How it works

Takes advantage of how the browser loads images by creating a placeholder image then after-the-fact appending the actual image from a "data-src" attribute.

This particular bit of JavaScript works in conjunction with the classes "opacity" and "fadein".

Browser compatibility

Tested in Firefox, Chrome, Opera, and IE flavors 7-9. IE 7 and 8 will simply have the images "magically" appear.


I feel weird about this since this pattern has got to be out there. But my aspect is released under the MIT License.

I did include Normalize.css and the box model tweak from Paul Irish for general demo formatting purposes.