Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

dont load images instantly, only when a filter is active

This question was posted through the quick post service. Please let me know what info can help you solve it.

User Gravatar


Posted Feb 11 2014 16:11 UTC


  • isotope

3 Replies

How about more information about what you want? A link? A better description?

User Gravatar


Posted Feb 11 2014 16:13 UTC

in this page "" preload the gallery and after that hides images , but the previous load of ALL images make the load of the page slow. i want that when i load the page dont load all the images of the gallery, only load them when a click on filter.

User Gravatar


Posted Feb 11 2014 16:37 UTC

Hi aneacolacao,

First you should change your html:

From this:

<img src="images/gallery/mudanzas/entornoscreativos_mudanzas_45.jpg" alt="" />

To this:

<img src="" data-src="images/gallery/mudanzas/entornoscreativos_mudanzas_45.jpg" alt="" />

Then add the additional JS for the lazy load:

$filter.find('a').click(function () {
    var selector = $(this).attr('data-filter');

    // lazy image load
    var $images = $container.find(selector).find('img[data-src]');
        var $img = $(this);
        $'load', function(){
        $img.attr('src', $img.attr('data-src')).removeAttr('data-src');
    // end of lazy image load

        filter: selector,
        animationOptions: {
            animationDuration: 750,
            easing: 'linear',
            queue: false,
    return false;

As you can see I've added class (.image-loaded) that you can use for additional styling. It is applied to the parent of the image, when the image is loaded.


Nikola Boychev

User Gravatar


Posted Feb 13 2014 4:03 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions