JQuery Lazy - загрузка всех изображений одновременно

Question

Я собираю галерею, которая включает в себя несколько довольно больших GIF-файлов. Я подумал, что лучше всего попытаться показать предварительный загрузчик, когда они загружаются и загружают только видимые изображения. Для этого я нашел JQuery Lazy: http://jquery.eisbehr.de/lazy/

Проблема, с которой я столкнулся, заключается в том, что все изображения загружаются одновременно, и я немного застрял в вопросе, почему!?! Вы можете увидеть, что у меня здесь: http://psychro.me/work/

Любая помощь с благодарностью. Большое спасибо.

Answer 1

Как написано в документации: (согласно http://jquery.eisbehr.de/lazy/example_delayed-loading)

... Lazy использует время задержки для загрузки всех изображений сразу после загрузки страницы, а не только для загрузкивидимые элементы ...

Так что я думаю, что если вы удалите свойство "delay", используемое на вашем сайте (закомментированное для тестирования), все изображения не будут загружены сразу.

Код на вашем сайте:

$(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
    });
});

Правильная форма:

$(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
    });
});