Lazy Loading Images

• kieranstartup

• November 13, 2015 at 2:25 am

Hi,

I’m trying to figure out how to lazy load images. Every WordPress plugin and external library I have tried so far has only loaded for example the first 4 images, and I have a page which contains for example 30 images placed at varying position down the page.

I have currently implemented jQuery.Lazy – http://jquery.eisbehr.de/lazy/ but I am totally willing to use a different library. This library loads only the first 5 images.

This is a stripped down version of what I have implemented on my main page:

<?php if (get_field('thumbnail_image')): ?>
    <div id="all-projects-featured-image"/>
        <a href="<?php echo get_permalink(); ?>">

            <img class="lazy" data-src="<?php the_field('thumbnail_image'); ?>"/>

        </a>
    </div>
<?php endif ?>

And this in the footer:

<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery(function() {
        jQuery('.lazy').lazy();
    });
  });
</script>

Cheers for any help!

• John Huebner

• November 15, 2015 at 1:26 am

If the URL is being added correctly to all of the data-src attributes then you’re having an issue with the script you’re using. You should look for possible javascript errors something else causing that script to fail.

If the attributes are not being populated correctly, make sure that the field you’re using is returning a url and not something else.

• kieranstartup

• November 15, 2015 at 1:31 am

Hey John,

Thanks for getting back in touch about this. It turns out I wasn’t using all the possible options in the script. I had set it with just the very basic options.

The updated script looks like this now and seems to be working well:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".lazy").lazy({
        effect          : "fadeIn",   // this only works on images !
        effectTime      : 1000,
        combined        : true,
        delay           : 12500,
        scrollDirection : 'vertical',
        visibleOnly     : false,      // could be removed, it's default value
        threshold       : 2000,
        defaultImage    : "",         // this is a bug, that the default image is set to non-images
                                      // i'll updated this within the next version
        afterLoad: function(element)
        {
            element.removeClass("loading").addClass("loaded");
        }
    });
});
</script>

Thanks!