Ошибка загрузки iOS на больших (более 50) образах с использованием swiper

пытаюсь создать сайт с помощью swiper с большим количеством фотографий. В различных браузерах на Mac и ПК он работает хорошо, но не работает на ios safari после того, как более 50 изображений находятся в моем массиве изображений. Ошибка в том, что IOS Safari пытается загрузить страницу, автоматически обновляется и пытается снова и снова, а затем показывает сообщение о том, что загрузка веб-сайта не удалась.

То же самое на IOS Firefox работает.

Источник, который я создаю с использованием некоторого PHP в CMS (LEPTON), после сбора имен изображений (без размера и расширения) в массиве:

foreach( $aImages as $image )
{
    $div .= '       <div class="swiper-slide" data-title="' . $image . '" >' . PHP_EOL;
    $div .= '           <img data-src="' . $imageURL . $image . '_8b.png" data-srcset="' . $imageURL . $image . '_24b.png 1200w" class="swiper-lazy">' . PHP_EOL;
    $div .= '           <div class="swiper-lazy-preloader"></div>' . PHP_EOL;
    $div .= '       </div>' . PHP_EOL;
}

мой JS для инициализации слайдера выглядит так:

$(document).ready(function () {
    //initialize swiper when document ready
    var mySwiper = new Swiper ('.swiper-container', {
        /* parameters with different value than default */
        // Duration of transition between slides (in ms)
        speed: 1400,
        // fading effect
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        // show hand on image
        grabCursor: true,
        // add visibility class to currently showing image
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        // Lazy Loading
        preloadImages: false,
        lazy: {
            loadPrevNext: true,
            loadPrevNextAmount: 1,
            loadOnTransitionStart: true,
        },
        // continuous loop mode
        loop: true,
        // double click zoom into image
        zoom: false,
        // enable keyboard navigation prev/next
        keyboard: {
            enabled: true,
            onlyInViewport: true,
            pageUpDown: true,
        },
        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
            hideOnClick: false,
        },
        // center image
        centeredSlides: true,
        centeredSlidesBounds: false,
        // autoplay
        autoplay: {
            delay: 3000,
            disableOnInteraction: true
        },
        autoplay: false,
    });

Есть идеи, что не так или что я могу изменить, чтобы решить свою проблему?

Спасибо заранее


person user2037828    schedule 19.10.2020    source источник


Ответы (1)


Я думаю, что решение моей проблемы - это виртуальные слайды ... Тестирование этого, но возникновение других проблем ... И доступные примеры в родном JS не особо помогают.

Обновление: наконец-то я запустил его с виртуальными слайдами. Однако есть ошибка в сочетании с увяданием. Без параметра затухания он работает.

person user2037828    schedule 26.10.2020