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

aneacolacao

Posted Feb 11 2014 16:11 UTC

$30


  • isotope
  • 766 Views

3 Replies


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

User Gravatar

macsupport

Posted Feb 11 2014 16:13 UTC

in this page "www.ecv.mx" 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

aneacolacao

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');
    $filter.find('a').removeClass('current');
    $(this).addClass('current');

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

    $container.isotope({
        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.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Feb 13 2014 4:03 UTC

Add a reply

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