CODEWITHSUNDEEP
jquerylazy-evaluation
user1549184
user1549184

Reputation: 63

jQuery Lazy - loading all images at once

I am putting together a gallery which includes some fairly large GIFs. I thought it might be best to try and show a preloader as they load and only load the visible images. For this I found jQuery Lazy: http://jquery.eisbehr.de/lazy/

The problem I am having is that all images seem to load at once and I am a bit stuck as to why!?! You can see what I've got here: http://psychro.me/work/

Any help greatly appreciated. Many thanks.

Upvotes: 0

Views: 4655

Answers (1)

Ali Khatami
Ali Khatami

Reputation: 379

As written in the docs: (according to http://jquery.eisbehr.de/lazy/example_delayed-loading )

...Lazy uses an delay time to load all images at once after page load, instead of only load the elements in view...

So I think if you remove the "delay" property used on your website (commented for testing), all images won't be loaded at once.

Code on your website:

$(function() {
    $('.lazy').lazy({

        beforeLoad: function(element) {
            var imageSrc = element.data('src');
            console.log('image "' + imageSrc + '" is about to be loaded');
        },
        scrollDirection: 'vertical',
        delay: 1000, // For testing
        effect: "fadeIn",
        effectTime: 1000,
        threshold: 0
    });
});

Correct form:

$(function() {
    $('.lazy').lazy({

        beforeLoad: function(element) {
            var imageSrc = element.data('src');
            console.log('image "' + imageSrc + '" is about to be loaded');
        },
        scrollDirection: 'vertical',
        effect: "fadeIn",
        effectTime: 1000,
        threshold: 0
    });
});

Upvotes: 3

Related Questions