getButterfly Logo getButterfly code wrangling since 2005

Loading (8bit)

We all know that images tend to load quite slowly, especially when using AJAX pagination. This was my case, and because it was a backoffice system, I decided to go with small script and load the images after the DOM was ready. This way, I could apply some smart CSS styling.

This is the main function:

function loadVisibleImages() {
    jQuery('img[data-src]').each(function() {
        this.src = jQuery(this).attr('data-src');

This is how I called it:

jQuery(window).load(function() {

Note that jQuery(window).load() works better than jQuery(document).ready(). I won’t go into further details on why and how.

And, finally, this is how I called the images:

<img src="placeholder.png" data-src="your-image.jpg" alt="">

placeholder.png could be a transparent PNG with a CSS-styled background, such as a rotating preloader icon or image. It could also be a black image with a white text saying “Loading…”, or even a progress indicator icon.

Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.

If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply