ленивая загрузка с большим количеством изображений - PullRequest
Новая
       0

ленивая загрузка с большим количеством изображений

0 голосов
/ 14 мая 2018

У меня есть этот код для отложенной загрузки изображений: 

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).on('scroll', function() {
    $('.imgli').each(function(){
        if ($(this).isInViewport()) {
            $(this).attr("src", $(this).attr("data-src")).removeAttr('data-src');
        }
    });
});

Работает примерно с 700 изображениями, но мне интересно - как насчет 20 000 изображений (макс.)?

Есть ли способ проверить это, не загружая по-настоящему 20 000 изображений, потому что у меня их пока не так много.

Каждое изображение размером около 100 КБ.

1 Ответ

0 голосов
/ 14 мая 2018

Прежде всего вы всегда можете скопировать ваши существующие изображения, чтобы сделать их 20 000, хотя это немного бессмысленно.

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

$(window).on('scroll', function() {
    $('.imgli').each(function(){
        if ($(this).isInViewport()) {
            $(this).attr("src", $(this).attr("data-src") + "?" + $.now());
        }
    });
});

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

Дополнительно Избегайте использования $(this) больше, чем необходимо.

Лучший способ - сохранить его в переменной.Таким образом вы экономите память. 

$(window).on('scroll', function() {
    $('.imgli').each(function() {
        var image = $(this);
        if (image.isInViewport()) {
            image.attr("src", image.attr("data-src") + "?" + $.now());
        }
    });
});
...