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

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

В основном, lazyload работает, но ТОЛЬКО после того, как я немного прокручиваю страницу.

Это параметры ленивой загрузки, которые я использую, и даже после установки порогового значения в 2000 пикселей (больше, чем вся высота страницы) он все равно загружает изображения только после того, как пользователь прокручивает страницу (даже 1 пиксель). Эта ошибка появляется только в браузерах webkit.

$(document).ready(function () {
    $("img").lazyload({threshold : "2000", effect : "fadeIn", effectspeed: 2000,});
});
 Chris Pratt10 июл. 2012 г., 20:40
Не знаю, если это проблема или нет, ноthreshold должен быть целым числом, т.е.threshold: 2000неthreshold: "2000".
 andy10 июл. 2012 г., 20:45
Да, это не имеет значения, Крис - все та же проблема.
 Дамян Станчев09 авг. 2012 г., 14:20
Что произойдет, если вы активируетеscroll событие страницы с использованием jquery. Нет необходимости перемещать прокрутку страницы - просто чтобы ее запустить?
 Ivan10 июл. 2012 г., 20:34
У меня тоже была эта проблема.

Ответы на вопрос(13)

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

и он запустит прокрутку и покажет изображения

$(window).trigger('scroll');
 11 авг. 2017 г., 15:04
Тогда зачем вообще ленивая нагрузка?
 09 янв. 2018 г., 11:30
Он не будет отображать все изображения, только те, которые видны.
 09 янв. 2018 г., 12:40
Ну, это имеет смысл.

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

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

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

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

Используя & apos; появляются & apos; покажет их все, если вы не ограничите это. В моем случае я хотел показать только первые 3 при загрузке. Остальным ленивый груз как обычно.

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

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

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

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

Вы должны быть загружены заранее заполнитель; как это & # xFF1A;

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

А потом

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

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

failure_limit.

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

Если для параметра fault_limit установлено значение 10, плагин прекращает поиск изображений для загрузки после нахождения 10 изображений ниже сгиба.

skip_invisible: false

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

 andy12 сент. 2012 г., 23:15
Ну да, но такой вид побеждает ленивую загрузку изображений, если они просто загружаются, даже если они скрыты.
Решение Вопроса

threshold параметр, но все же вы можете вручную запустить загрузку в соответствии сэта страница:

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

но если вы хотите загрузить все изображения наreadyзачем вообще ленивая нагрузка? Вы могли бы просто использовать$.animate.

 andy10 июл. 2012 г., 22:02
Кажется, что это загружает все изображения, независимо от того, где они сейчас находятся на странице, даже вне окон просмотра. Я не хочу загружать все изображения по готовности, я хочу загружать их ТОЛЬКО, если они находятся на экране, как я уже говорил. Это потому, что у меня есть много скрытого контента, который обслуживается только на мобильных устройствах, и я не хочу, чтобы они загружали огромные изображения, которые они в любом случае не могут просматривать.
 23 авг. 2017 г., 14:27
Если вы хотите, чтобы изображения отображались только для ваших мобильных пользователей, добавьте класс & quot; mobile & quot; к этим изображениям. Затем используйте указанное выше событие только для $ (& quot; img.mobile & quot;).
 06 нояб. 2013 г., 15:06
Вы спасатель жизни! Спасибо, я не знал об этом методе события.

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

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

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

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

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

 06 нояб. 2013 г., 15:08
Вы в некоторой степени правы, но где-то с этим должна быть ошибка, потому что она не всегда работает. Возникновение события вручную после инициализации исправляет это - как подсказывает пользовательский поз.
 06 нояб. 2013 г., 18:57
Комментатор выше - позы
 06 нояб. 2013 г., 17:03
URL страницы, на которую вы ссылаетесь?

Обратите внимание, что мои изображения были помещены в 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();
 });

Или, в конце концов, добавьте вызов к & quot; update () & quot; на любое другое необходимое событие.

 14 авг. 2013 г., 14:27
Это было исправлено в 1.8.5.

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

<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');
 06 нояб. 2013 г., 15:14
Хороший взлом, но вы можете запустить событие вручную, как сказано выше, похоже, оно работает для всех ситуаций, в которых оно вам необходимо.
 06 нояб. 2013 г., 17:06
Решение Pozs выше безоговорочно просто загружает все изображения, как только происходит событие document.ready. Эффект в основном такой же, как и вообще без использования плагина Lazy Load.

Ваш ответ на вопрос