107 lines
3.1 KiB
Markdown
107 lines
3.1 KiB
Markdown
# 🔧 Background Animation Fix
|
||
|
||
## ❌ Проблема
|
||
|
||
При загрузке страниц появлялась ошибка:
|
||
```
|
||
Uncaught TypeError: window.phantomBackground.resize is not a function
|
||
```
|
||
|
||
### Причина:
|
||
`MutationObserver` пытался вызвать `resize()` до того, как объект `BackgroundAnimation` был создан.
|
||
|
||
---
|
||
|
||
## ✅ Исправление
|
||
|
||
### 1. Объединили загрузчики
|
||
**Было:** Два отдельных `window.addEventListener('load')` - конфликт
|
||
**Стало:** Один обработчик с правильной последовательностью
|
||
|
||
### 2. Добавили проверки
|
||
```javascript
|
||
if (window.phantomBackground && typeof window.phantomBackground.resize === 'function') {
|
||
window.phantomBackground.resize();
|
||
}
|
||
```
|
||
|
||
### 3. Throttling для MutationObserver
|
||
Добавили задержку 500ms для предотвращения множественных вызовов:
|
||
```javascript
|
||
if (!window.phantomBackground._resizing) {
|
||
window.phantomBackground._resizing = true;
|
||
setTimeout(() => {
|
||
window.phantomBackground.resize();
|
||
window.phantomBackground._resizing = false;
|
||
}, 500);
|
||
}
|
||
```
|
||
|
||
### 4. Улучшили метод resize()
|
||
```javascript
|
||
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
|
||
```javascript
|
||
let resizeTimeout;
|
||
window.addEventListener('resize', () => {
|
||
if (resizeTimeout) clearTimeout(resizeTimeout);
|
||
resizeTimeout = setTimeout(() => this.resize(), 100);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 📊 Результат
|
||
|
||
### До исправления ❌
|
||
- Ошибка в консоли при загрузке каждой страницы
|
||
- MutationObserver вызывался слишком рано
|
||
- Множественные вызовы resize()
|
||
|
||
### После исправления ✅
|
||
- Нет ошибок в консоли
|
||
- Правильная последовательность инициализации
|
||
- Оптимизированные вызовы resize()
|
||
- Стабильная работа анимации
|
||
|
||
---
|
||
|
||
## 🧪 Проверка
|
||
|
||
Откройте консоль (F12) и проверьте:
|
||
```javascript
|
||
// Должен вернуть объект без ошибок
|
||
window.phantomBackground
|
||
|
||
// Должен вернуть: BackgroundAnimation {canvas: canvas#phantomBackground, ctx: CanvasRenderingContext2D, ...}
|
||
```
|
||
|
||
---
|
||
|
||
## 📝 Изменённые файлы
|
||
|
||
- ✅ `js/background.js` - Исправлена логика инициализации
|
||
|
||
---
|
||
|
||
**Статус:** ✅ **ИСПРАВЛЕНО**
|
||
|
||
Анимация теперь работает без ошибок на всех страницах!
|