Lazy Load не будет загружать видимые изображения

просто добавьте это после .lazyload (), и он запустит прокрутку и покажет изображения

$(window).trigger('scroll');

вы должны установить ширину и высоту изображения.

если ширина и высота не заданы, jQuery сообщит о невидимых изображениях в браузерах Webkit в документе.событие Load. Когда skip_invisible is true Lazy Load будет игнорировать изображения, то есть он не будет пытаться выяснить, следует ли загружать изображение или нет. Они будут загружаться при первом прокрутке.

если вы устанавливаете skip_invisible is false плагин попытается выяснить, должны ли загружаться изображения. Однако поскольку у вас нет ширина и набор высоты все изображения будут размером 0x0 или 1x1. Из-за этого все изображения находятся в окне просмотра (из-за их размера), когда плагин запускается. Поскольку изображения находятся в viewport Lazy Load, будет дана инструкция загрузить их все.

вкратце: добавьте ширину и высоту к изображениям. Lazy Load не будет работать должным образом без них.

Я не уверен, когда это было добавлено, но вы можете вручную запустить событие "appear" для некоторых или всех (в зависимости от селектора css):

$("img.lazy").trigger('appear');

получил это отсюда:http://yuji.wordpress.com/2014/05/14/force-jquery-lazyload-to-appear/

У меня была та же проблема. Они находятся в прокрутке div, но будут загружаться только после начальной прокрутки.

использование 'appear' покажет их все, если вы не ограничите его. В моем случае я хотел показать только первые 3 При загрузке. Остальные, как обычно, ленивы.

$("img.lazy:lt(3)").trigger('appear');

попробуйте передать дополнительный параметр.

skip_invisible: false

этот параметр по умолчанию true, поэтому кажется, что ваши изображения не видны при запуске плагина. Это может произойти, когда вы используете любой preloader на своем веб-сайте.

у меня была такая же проблема, и я нашел решение для этого. Обратите внимание, что мои изображения были размещены внутри div, который заполняется с помощью вызова ajax.

просто измените строку кода внутри источников lazyload (строки 147-150) версии 1.8.4:

/* Force initial check if images should appear. */
        $(document).ready(function() {
            update();
        });

вместо

/* Force initial check if images should appear. */
        $(window).load(function() {
            update();
 });

или в конечном итоге добавьте вызов "update()" к любому другому необходимому событию.

У меня была аналогичная проблема, когда изображения не загружались после вызова ajax, пока я не прокрутил (даже если я просто прокрутил 1px, он загрузится). Я обнаружил, что мне нужно добавить высоту и ширину к моим изображениям, как сказал Мика Туупола. Мои изображения загружались динамически,были разных размеров и загружались из цикла foreach. Я добавил общий атрибут width и height в тег image, затем после загрузки lazyload изображение я удалил атрибуты, чтобы показать правильное изображение размер.

<img class="lazy" src="img/placeholder.gif" data-original="img/image.gif" width="1000" height="600">

$('img.lazy').lazyload({
    skip_invisible: false
}).removeClass('lazy').removeAttr('width').removeAttr('height');

У меня была такая же проблема со скрытыми элементами, простое решение, но оно работает. Когда я нажимаю на страницу, Я запускаю событие прокрутки, чтобы заставить скрипт lazyload. Вы можете сделать то же самое с событием resize

$(document).ready(function () {
    $("img").lazyload({
        event: "lazyload",
        effect: "fadeIn",
        effectspeed: 2000
    });
    $(window).resize(function () {
        $(this).trigger("scroll");
    }); 
});

короче: добавьте ширину и высоту изображения. Lazy Load не будет работать должным образом без них.

вы должны быть загружены заранее заполнитель;как это:

<img src="./images/grey.gif" alt="" style="display:none">

а то

$("img.lazy").lazyload({placeholder : "images/grey.gif"});

Если вы установите ширину изображения на 100%, это обеспечит ширину и высоту. Это решило мою проблему.

это рабочее решение, но по какой-то причине не очень хорошо:

$("img").lazyload({
    /* Image loaded callback function */
    load: function() {
        $(window).trigger('scroll');
    }
});

каждый раз, когда плагин lazyload загружает изображение, эта функция будет вызываться и будет эмулировать триггер окна "прокрутка", поэтому это решение для меня

увеличить failure_limit.

после прокрутки страницы плагина петли, хотя выгруженные изображения. Loop проверяет, стало ли изображение видимым. По умолчанию цикл останавливается при обнаружении первого изображения за пределами окна просмотра. Это основано на следующем предположении. Порядок изображений на странице такой же, как порядок изображений в HTML-коде. С некоторыми предположениями макетов это может быть неправильно.

установка failure_limit на 10 заставляет плагин прекратить поиск изображений для загрузки после найти 10 изображений ниже сгиба.

Я имел дело с той же проблемой и я заметил, что эта проблема возникает только, когда изображения находятся внутри div, который изначально скрыт (т. е. дисплей: нет;)