- avoid lazy-loading above-the-fold images

Author: TobiasMue91

index.html

@@ -281,6 +281,7 @@ <h3>No results found</h3>
     const gridViewBtn = document.getElementById('gridViewBtn');
     const listViewBtn = document.getElementById('listViewBtn');
     const statsContainer = document.getElementById('statsContainer');
+    const isMobile = navigator.userAgentData?.mobile ?? /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
 
     // State
     let allItems = [];
@@ -323,14 +324,18 @@ <h3>No results found</h3>
     }
 
     // Create card HTML
-    function createCard(item) {
+    function createCard(item, index) {
         const isNew = isNewItem(item);
         const cardClass = `card ${item.type}${isListView ? ' list-card' : ''}`;
 
+        let numberOfLazyLoads = isMobile ? 4 : 10;
+        const shouldLazyLoad = index >= numberOfLazyLoads;
+        const loadingAttribute = shouldLazyLoad ? 'loading="lazy"' : 'fetchpriority="high"';
+
         return `
     <div class="${cardClass}" data-id="${item.id}" data-type="${item.type}" data-category="${getCategory(item)}">
         <div class="card-img-wrap">
-            <img src="${item.screenshot}" alt="${item.title}" class="card-img" loading="lazy">
+            <img src="${item.screenshot}" alt="${item.title}" class="card-img" ${loadingAttribute}>
             <span class="card-type ${item.type}">${item.type}</span>
             <div class="card-badges">
                 ${item.aiPowered ? '<span class="card-badge">AI Powered</span>' : ''}
@@ -446,7 +451,7 @@ <h3 class="card-title" title="${item.title}">${item.title}</h3>
         const itemsToShow = filtered.slice(0, end);
 
         mainGrid.className = isListView ? 'list-view' : 'grid-view';
-        mainGrid.innerHTML = itemsToShow.map(createCard).join('');
+        mainGrid.innerHTML = itemsToShow.map((item, index) => createCard(item, index)).join('');
 
         document.querySelectorAll('.read-more').forEach(btn => {
             btn.addEventListener('click', function() {