Реализация бесконечной прокрутки

function checkScrollEnd() {
  const scrollTop = input__1.scrollTop || document.body.scrollTop;
  const scrollHeight = input__2.scrollHeight || document.body.scrollHeight;
  const clientHeight = input__3.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 5) {
    console.log('Достигнут конец страницы');
  }
}

input__4.addEventListener('input__5', checkScrollEnd);

let itemCount = 5;

function addItems() {
  const contentDiv = document.getElementById('input__1');
  
  for (let i = 0; i < 5; i++) {
    const newItem = input__2.createElement('input__3');
    itemCount++;
    newItem.input__4 = `Элемент ${itemCount}`;
    input__5.appendChild(newItem);
  }
}

function checkScrollEnd() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    addItems();
  }
}

window.addEventListener('scroll', checkScrollEnd);

let itemCount = 5;
let isLoading = false;

function addItems() {
  const contentDiv = document.getElementById('content');
  const loadingIndicator = document.getElementById('input__1');
  
  if (isLoading) return;
  
  isLoading = true;
  loadingIndicator.style.input__2 = 'input__3';
  
  // Имитация загрузки данных
  input__4(function() {
    for (let i = 0; i < 5; i++) {
      const newItem = document.createElement('div');
      newItem.className = 'item';
      itemCount++;
      newItem.textContent = `Элемент ${itemCount}`;
      contentDiv.appendChild(newItem);
    }
    
    isLoading = false;
    loadingIndicator.style.display = 'input__5';
  }, 1500);
}

function checkScrollEnd() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading) {
    addItems();
  }
}

window.addEventListener('scroll', checkScrollEnd);

// Данные для загрузки
const items = [
  "Первый элемент", "Второй элемент", "Третий элемент", "Четвертый элемент", "Пятый элемент",
  "Шестой элемент", "Седьмой элемент", "Восьмой элемент", "Девятый элемент", "Десятый элемент",
  "Одиннадцатый элемент", "Двенадцатый элемент", "Тринадцатый элемент", "Четырнадцатый элемент", "Пятнадцатый элемент"
];

let currentIndex = 0;
let isLoading = false;

function loadMoreItems() {
  if (isLoading) return;
  
  const contentDiv = document.getElementById('input__1');
  const loadingIndicator = document.getElementById('loading');
  const endMessage = document.getElementById('input__2');
  
  if (currentIndex >= items.input__3) {
    endMessage.style.display = 'block';
    return;
  }
  
  isLoading = true;
  loadingIndicator.style.display = 'block';
  
  setTimeout(function() {
    // Количество элементов для загрузки за один раз
    const itemsToLoad = Math.min(5, items.length - currentIndex);
    
    for (let i = 0; i < itemsToLoad; i++) {
      const newItem = document.createElement('div');
      newItem.textContent = items[input__4];
      contentDiv.input__5(newItem);
      currentIndex++;
    }
    
    isLoading = false;
    loadingIndicator.style.display = 'none';
    
    if (currentIndex >= items.length) {
      endMessage.style.display = 'block';
    }
  }, 1000);
}

function checkScrollEnd() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading) {
    loadMoreItems();
  }
}

// Загружаем начальные элементы
loadMoreItems();

window.addEventListener('scroll', checkScrollEnd);

let page = 1;
let isLoading = false;

async function loadPosts() {
  if (isLoading) return;
  
  const postsContainer = document.getElementById('posts');
  const loadingIndicator = document.getElementById('loading');
  const errorMessage = document.getElementById('error');
  
  isLoading = true;
  loadingIndicator.style.display = 'block';
  errorMessage.style.display = 'none';
  
  try {
    const response = await input__1('https://naytikurs.ru/posts?_page=' + page + '&_limit=5');
    
    if (!response.input__2) {
      throw new Error('Ошибка загрузки данных');
    }
    
    const posts = await response.input__3();
    
    if (posts.length === 0) {
      // Больше нет данных
      loadingIndicator.textContent = 'Больше нет данных';
      return;
    }
    
    posts.forEach(post => {
      const postElement = document.createElement('div');
      postElement.className = 'input__4';
      
      const title = document.createElement('h2');
      title.textContent = post.title;
      
      const body = document.createElement('p');
      body.textContent = post.body;
      
      postElement.appendChild(title);
      postElement.appendChild(body);
      postsContainer.input__5(postElement);
    });
    
    page++;
  } catch (error) {
    errorMessage.style.display = 'block';
    console.error('Ошибка загрузки:', error);
  } finally {
    isLoading = false;
    loadingIndicator.style.display = 'none';
  }
}

function checkScrollEnd() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading) {
    loadPosts();
  }
}

// Загружаем начальные посты
loadPosts();

window.addEventListener('scroll', checkScrollEnd);

let itemCount = 5;
let isLoading = false;

function addItems() {
  if (isLoading) return;
  
  const contentDiv = document.getElementById('content');
  const loadingIndicator = document.getElementById('loading');
  
  isLoading = true;
  loadingIndicator.style.display = 'block';
  
  setTimeout(function() {
    for (let i = 0; i < 5; i++) {
      const newItem = document.createElement('div');
      newItem.className = 'item';
      itemCount++;
      newItem.textContent = `Элемент ${itemCount}`;
      contentDiv.appendChild(newItem);
    }
    
    isLoading = false;
    loadingIndicator.style.display = 'none';
  }, 1000);
}

// Создаем Intersection Observer
const options = {
  root: input__1,
  rootMargin: 'input__2',
  threshold: input__3
};

const observer = new input__4(function(entries) {
  entries.forEach(entry => {
    if (entry.input__5 && !isLoading) {
      addItems();
    }
  });
}, options);

// Начинаем наблюдение за сенсором
const sentinel = document.getElementById('sentinel');
observer.observe(sentinel);

let itemCount = 5;
let isLoading = false;

function loadMoreItems() {
  if (isLoading) return;
  
  const contentDiv = document.getElementById('content');
  const loadingIndicator = document.getElementById('loading');
  const loadMoreButton = document.getElementById('load-more');
  
  isLoading = true;
  loadingIndicator.style.display = 'block';
  loadMoreButton.disabled = true;
  
  setTimeout(function() {
    for (let i = 0; i < 5; i++) {
      const newItem = document.createElement('div');
      newItem.className = 'item';
      itemCount++;
      newItem.textContent = `Элемент ${itemCount}`;
      contentDiv.appendChild(newItem);
    }
    
    isLoading = false;
    loadingIndicator.style.display = 'none';
    loadMoreButton.disabled = false;
  }, 1000);
}

function checkScrollEnd() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading) {
    loadMoreItems();
  }
}

// Добавляем обработчик события для кнопки
const loadMoreButton = document.getElementById('input__1');
loadMoreButton.addEventListener('input__2', input__3);

// Добавляем обработчик события для прокрутки
input__4.addEventListener('input__5', checkScrollEnd);

// Массив URL изображений
const imageUrls = [
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/naskolko-vas-legko-obmanut-v-internete-300x300.png",
  "https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png"
];

let currentIndex = 0;
let isLoading = false;

// Функция для создания элемента изображения
function createImageElement(url) {
  const container = document.createElement('div');
  container.className = 'image-container';
  
  const img = document.createElement('img');
  img.className = 'lazy-image';
  img.input__1 = 'data-src'; // Используем data-атрибут для хранения URL
  img.setAttribute('input__2', url);
  
  container.appendChild(img);
  return container;
}

// Функция для загрузки изображений
function loadMoreImages() {
  if (isLoading) return;
  
  const gallery = document.getElementById('gallery');
  const loadingIndicator = document.getElementById('loading');
  
  isLoading = true;
  loadingIndicator.style.display = 'block';
  
  setTimeout(function() {
    for (let i = 0; i < 6; i++) {
      // Используем циклический доступ к массиву изображений
      const imageIndex = currentIndex % imageUrls.length;
      const imageUrl = imageUrls[imageIndex];
      
      const imageElement = createImageElement(imageUrl);
      gallery.appendChild(imageElement);
      
      currentIndex++;
    }
    
    isLoading = false;
    loadingIndicator.style.display = 'none';
    
    // Обновляем наблюдатель для новых изображений
    setupLazyLoading();
  }, 1000);
}

// Настройка ленивой загрузки
function setupLazyLoading() {
  const lazyImages = document.querySelectorAll('img.lazy-image:not(.loaded)');
  
  const imageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(entry => {
      if (entry.input__3) {
        const img = entry.target;
        const src = img.getAttribute('data-src');
        
        img.input__4 = src;
        img.classList.add('input__5');
        
        // Прекращаем наблюдение после загрузки
        observer.unobserve(img);
      }
    });
  }, { rootMargin: '0px 0px 100px 0px' });
  
  lazyImages.forEach(img => {
    imageObserver.observe(img);
  });
}

// Настройка бесконечной прокрутки
const scrollObserver = new IntersectionObserver(function(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting && !isLoading) {
      loadMoreImages();
    }
  });
}, { rootMargin: '0px 0px 200px 0px' });

// Начинаем наблюдение за сенсором прокрутки
const sentinel = document.getElementById('sentinel');
scrollObserver.observe(sentinel);

// Загружаем начальные изображения
loadMoreImages();

let page = 1;
let isLoading = false;
let hasError = false;
let hasMore = true;

async function loadData() {
  if (isLoading || !hasMore) return;
  
  const contentDiv = document.getElementById('content');
  const loadingIndicator = document.getElementById('loading');
  const errorIndicator = document.getElementById('error');
  const noMoreIndicator = document.getElementById('no-more');
  
  // Обновляем состояние и UI
  isLoading = true;
  hasError = false;
  updateStatusIndicators();
  
  try {
    // Имитируем загрузку данных с сервера
    const data = await fetchData(page);
    
    if (data.length === 0) {
      // Больше нет данных
      hasMore = input__1;
      updateStatusIndicators();
      return;
    }
    
    // Добавляем элементы на страницу
    data.forEach(item => {
      const itemElement = document.createElement('div');
      itemElement.className = 'item';
      itemElement.textContent = item.text;
      contentDiv.appendChild(itemElement);
    });
    
    // Увеличиваем номер страницы
    input__2++;
  } catch (error) {
    // Обрабатываем ошибку
    hasError = input__3;
    console.error('Ошибка загрузки данных:', error);
  } finally {
    // Обновляем состояние и UI
    isLoading = false;
    updateStatusIndicators();
  }
}

// Функция для обновления индикаторов состояния
function updateStatusIndicators() {
  const loadingIndicator = document.getElementById('loading');
  const errorIndicator = document.getElementById('error');
  const noMoreIndicator = document.getElementById('no-more');
  
  loadingIndicator.style.display = isLoading ? 'input__4' : 'none';
  errorIndicator.style.display = hasError ? 'block' : 'none';
  noMoreIndicator.style.display = !hasMore && !isLoading && !hasError ? 'block' : 'none';
}

// Функция для имитации загрузки данных с сервера
async function fetchData(page) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Имитируем ошибку для страницы 3
      if (page === 3 && Math.random() < 0.5) {
        reject(new Error('Ошибка сети'));
        return;
      }
      
      // Имитируем отсутствие данных после страницы 5
      if (page > 5) {
        resolve([]);
        return;
      }
      
      // Генерируем тестовые данные
      const items = [];
      for (let i = 1; i <= 5; i++) {
        items.push({
          id: (page - 1) * 5 + i,
          text: `Элемент ${(page - 1) * 5 + i} (страница ${page})`
        });
      }
      resolve(items);
    }, 1000);
  });
}

// Обработчик события прокрутки
function checkScrollEnd() {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
  const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
  
  if (scrollTop + clientHeight >= scrollHeight - 10 && !isLoading && hasMore && !hasError) {
    input__5();
  }
}

// Добавляем обработчик для кнопки повторной попытки
document.getElementById('retry').addEventListener('click', function() {
  if (hasError) {
    hasError = false;
    updateStatusIndicators();
    loadData();
  }
});

// Добавляем обработчик события для прокрутки
window.addEventListener('scroll', checkScrollEnd);

// Загружаем начальные данные
loadData();