Ленивая загрузка

Ленивая загрузка (lazy loading) в Tooltipster позволяет создавать подсказки, содержимое которых загружается только при необходимости, а не при инициализации страницы. Это повышает производительность, особенно при большом количестве элементов с тултипами или при работе с тяжелым контентом (например, изображениями, видео, HTML-фрагментами с запросами к серверу).

Инициализация тултипа с ленивой загрузкой

Для ленивой загрузки используется опция functionBefore. Она вызывается перед тем, как тултип будет показан. Внутри этой функции можно динамически подгрузить контент.

$('.tooltip-element').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);

        // Проверяем, был ли уже загружен контент
        if ($origin.data('loaded') !== true) {
            $.ajax({
                url: '/get-tooltip-content',
                method: 'GET',
                data: { id: $origin.data('id') },
                success: function(data) {
                    instance.content(data);
                    $origin.data('loaded', true); // помечаем как загруженный
                },
                error: function() {
                    instance.content('Ошибка загрузки');
                }
            });
        }
    }
});

Ключевые моменты:

  • functionBefore вызывается каждый раз перед открытием тултипа.
  • instance.content() позволяет динамически изменять содержимое.
  • Использование $origin.data('loaded') предотвращает повторные запросы к серверу.

Асинхронная загрузка HTML-контента

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

$('.tooltip-html').tooltipster({
    interactive: true,
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        if (!$origin.data('loaded')) {
            $.get('/tooltip-html?id=' + $origin.data('id'), function(data) {
                instance.content($(data));
                $origin.data('loaded', true);
            });
        }
    }
});

Особенности:

  • Контент можно вставлять как строку или jQuery-элемент.
  • interactive: true предотвращает закрытие тултипа при наведении на него курсора.
  • Можно обрабатывать события внутри тултипа, например клики или формы.

Использование промисов для ленивой загрузки

Современный подход — использовать Promise, что упрощает обработку асинхронных данных.

$('.tooltip-promise').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        if (!$origin.data('loaded')) {
            instance.content(new Promise(function(resolve, reject) {
                fetch('/tooltip-promise?id=' + $origin.data('id'))
                    .then(response => response.text())
                    .then(data => {
                        $origin.data('loaded', true);
                        resolve(data);
                    })
                    .catch(() => resolve('Ошибка загрузки'));
            }));
        }
    }
});

Преимущества промисов:

  • Чистая работа с асинхронными вызовами.
  • Возможность легко комбинировать несколько запросов.
  • Поддержка нативного fetch без jQuery.

Кэширование контента

Для оптимизации рекомендуется кэшировать контент, чтобы не выполнять лишние запросы.

var tooltipCache = {};

$('.tooltip-cache').tooltipster({
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        var id = $origin.data('id');

        if (tooltipCache[id]) {
            instance.content(tooltipCache[id]);
        } else {
            $.get('/tooltip-cache?id=' + id, function(data) {
                tooltipCache[id] = data;
                instance.content(data);
            });
        }
    }
});

Преимущества кэширования:

  • Снижается нагрузка на сервер.
  • Повышается скорость отображения тултипа.
  • Позволяет использовать один и тот же контент для нескольких элементов.

Ленивая загрузка изображений

Для тултипов с изображениями можно загружать только при открытии:

$('.tooltip-image').tooltipster({
    content: '<img src="" alt="Загрузка..." />',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        if (!$origin.data('loaded')) {
            var img = $('<img>', { src: $origin.data('src') });
            img.on('load', function() {
                instance.content(img);
                $origin.data('loaded', true);
            });
        }
    }
});

Особенности:

  • Сначала отображается заглушка.
  • После загрузки изображения тултип обновляется автоматически.
  • Поддерживается плавное добавление любого мультимедийного контента.

Комбинированная стратегия

Можно сочетать ленивую загрузку HTML, изображений и промисов:

$('.tooltip-combined').tooltipster({
    interactive: true,
    content: 'Загрузка...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        if (!$origin.data('loaded')) {
            instance.content(new Promise(function(resolve) {
                $.get('/tooltip-combined?id=' + $origin.data('id'), function(data) {
                    var $content = $(data);
                    $content.find('img[data-src]').each(function() {
                        $(this).attr('src', $(this).data('src'));
                    });
                    $origin.data('loaded', true);
                    resolve($content);
                });
            }));
        }
    }
});

Преимущества комбинированного подхода:

  • Асинхронная загрузка и обновление всего контента одновременно.
  • Поддержка интерактивного взаимодействия.
  • Эффективное использование ресурсов страницы и сервера.

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

Оглавление