🔧 Background Animation Fix

❌ Проблема

При загрузке страниц появлялась ошибка:

Uncaught TypeError: window.phantomBackground.resize is not a function

Причина:

MutationObserver пытался вызвать resize() до того, как объект BackgroundAnimation был создан.

✅ Исправление

1. Объединили загрузчики

Было: Два отдельных window.addEventListener('load') - конфликт Стало: Один обработчик с правильной последовательностью

2. Добавили проверки

if (window.phantomBackground && typeof window.phantomBackground.resize === 'function') {
    window.phantomBackground.resize();
}

3. Throttling для MutationObserver

Добавили задержку 500ms для предотвращения множественных вызовов:

if (!window.phantomBackground._resizing) {
    window.phantomBackground._resizing = true;
    setTimeout(() => {
        window.phantomBackground.resize();
        window.phantomBackground._resizing = false;
    }, 500);
}

4. Улучшили метод resize()

resize() {
    if (!this.canvas) return;
    
    const newWidth = window.innerWidth;
    const newHeight = Math.max(
        document.documentElement.scrollHeight,
        document.body.scrollHeight,
        window.innerHeight
    );
    
    // Обновляем только если размер действительно изменился
    if (this.canvas.width !== newWidth || this.canvas.height !== newHeight) {
        this.canvas.width = newWidth;
        this.canvas.height = newHeight;
    }
}

5. Throttling для window.resize

let resizeTimeout;
window.addEventListener('resize', () => {
    if (resizeTimeout) clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(() => this.resize(), 100);
});

📊 Результат

До исправления ❌

Ошибка в консоли при загрузке каждой страницы
MutationObserver вызывался слишком рано
Множественные вызовы resize()

После исправления ✅

Нет ошибок в консоли
Правильная последовательность инициализации
Оптимизированные вызовы resize()
Стабильная работа анимации

🧪 Проверка

Откройте консоль (F12) и проверьте:

// Должен вернуть объект без ошибок
window.phantomBackground

// Должен вернуть: BackgroundAnimation {canvas: canvas#phantomBackground, ctx: CanvasRenderingContext2D, ...}

📝 Изменённые файлы

✅ js/background.js - Исправлена логика инициализации

Статус: ✅ ИСПРАВЛЕНО

Анимация теперь работает без ошибок на всех страницах!

3.1 KiB Raw Permalink Blame History Unescape Escape