Preload lazy images

Demo: предзагрузка изображений

Изображение с loading="lazy" и src (пример из вашего запроса):

Изображение с data-src (оригинальный сценарий):

// Предзагружает в кэш все изображения, указанные через data-src или имеющие loading="lazy" с src. window.addEventListener('load', function () { console.log('Страница загружена'); const imgs = Array.from(document.querySelectorAll('img[loading="lazy"], img[data-src]')); imgs.forEach(img => { // Приоритет: data-src (если есть), иначе src const srcAttr = img.hasAttribute('data-src') ? img.getAttribute('data-src') : img.getAttribute('src'); if (!srcAttr) return; // Если изображение уже загружено, пропустить if (img.complete && img.naturalWidth !== 0) { console.log('Уже загружено:', srcAttr); return; } // Построить абсолютный URL корректно для относительных путей и протокольно-относительных "//..." const url = srcAttr.startsWith('//') ? location.protocol + srcAttr : (new URL(srcAttr, location.href)).href; console.log('Предзагрузка изображения', url); const pre = new Image(); // Сохранить crossorigin, если он задан на элементе img (полезно для CORS-запросов) if (img.getAttribute('crossorigin') !== null) { pre.crossOrigin = img.getAttribute('crossorigin') || 'anonymous'; } pre.src = url; // Опционально: привязать обработчики ошибок/успеха для отладки pre.onload = () => console.log('Предзагрузка завершена:', url); pre.onerror = () => console.warn('Ошибка при предзагрузке:', url); }); });