Detailed Image Analysis

${tableHtml} `; }; // --- CORE LOGIC --- const handleTest = () => { runTestBtnSpinner.classList.remove('hidden'); runTestBtnText.textContent = 'Analyzing...'; runTestBtn.disabled = true; setTimeout(() => { const viewportHeight = parseInt(document.getElementById('viewport-height').value); const userHtml = htmlInput.value; testSandbox.innerHTML = userHtml; const images = Array.from(testSandbox.querySelectorAll('img')); const imageResults = []; let loadedCount = 0; images.forEach(img => { const isLazy = img.getAttribute('loading') === 'lazy'; const isAboveFold = img.offsetTop < viewportHeight; let status, reason; if (!isLazy) { status = 'Loaded'; reason = 'Eager loading (no lazy attribute).'; loadedCount++; } else { if (isAboveFold) { status = 'Loaded'; reason = 'Lazy loading, but visible in the initial viewport.'; loadedCount++; } else { status = 'Potentially Missed'; reason = 'Lazy loading and located below the initial viewport.'; } } imageResults.push({ src: img.src || '(No src)', status, reason }); }); const results = { images: imageResults, totalCount: images.length, loadedCount: loadedCount, percentLoaded: images.length > 0 ? (loadedCount / images.length) * 100 : 100 }; renderResults(results); downloadPdfBtn.disabled = false; testSandbox.innerHTML = ''; // Clean up runTestBtnSpinner.classList.add('hidden'); runTestBtnText.textContent = 'Run SEO Test'; runTestBtn.disabled = false; }, 500); }; // --- UI & EVENT HANDLERS --- const switchTab = (tabId) => { currentTab = tabId; Object.values(tabPanes).forEach(pane => pane.classList.add('hidden')); tabPanes[tabId].classList.remove('hidden'); Object.values(tabButtons).forEach(btn => btn.classList.replace('tab-active', 'tab-inactive')); tabButtons[tabId].classList.replace('tab-inactive', 'tab-active'); updateNavButtons(); }; const navigateTabs = (direction) => { const currentIndex = tabs.indexOf(currentTab); const newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1; if (newIndex >= 0 && newIndex < tabs.length) switchTab(tabs[newIndex]); }; const updateNavButtons = () => { const currentIndex = tabs.indexOf(currentTab); prevBtn.disabled = currentIndex === 0; nextBtn.disabled = currentIndex === tabs.length - 1; prevBtn.classList.toggle('opacity-50', prevBtn.disabled); nextBtn.classList.toggle('opacity-50', nextBtn.disabled); }; const handlePdfDownload = () => { const pdfRenderContainer = document.getElementById('pdf-render-content'); const pdfContent = document.getElementById('pdf-content').innerHTML; const viewportHeight = document.getElementById('viewport-height').value; const header = `'; // Make PDF table more readable pdfRenderContainer.querySelectorAll('table').forEach(t => t.style.fontSize = '10px'); html2canvas(pdfRenderContainer, { scale: 2 }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(), margin = 40; const contentWidth = pdfWidth - margin * 2; const pdfHeight = (canvas.height * contentWidth) / canvas.width; pdf.addImage(imgData, 'PNG', margin, margin, contentWidth, pdfHeight); pdf.save('Lazy-Loading-SEO-Report.pdf'); }); }; // --- EVENT LISTENERS --- window.switchTab = switchTab; window.navigateTabs = navigateTabs; runTestBtn.addEventListener('click', handleTest); downloadPdfBtn.addEventListener('click', handlePdfDownload); // --- INITIALIZATION --- initialize(); });