GarpBot/cs2-WeaponPaints
1
0
Fork 0
mirror of https://github.com/Nereziel/cs2-WeaponPaints.git synced 2026-03-10 16:34:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor skin image loading in index.php by removing intersection observer; implement direct image rendering for improved performance and simplicity.

Browse Source
This commit is contained in:
Bram Suurd
2025-06-29 22:57:23 +02:00
parent 048ce5cf5e
commit 199a090e8c
1 changed files with 6 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
website/index.php
View File

@@ -486,63 +486,17 @@ if (isset($_SESSION['steamid'])) {
// Clear previous skins // Clear previous skins
skinGrid.innerHTML = ''; skinGrid.innerHTML = '';
// Populate skins with intersection observer lazy loading // Populate skins
const skinEntries = Object.entries(skinsData[weaponId]); Object.entries(skinsData[weaponId]).forEach(([paintId, skin]) => {
// Create intersection observer for lazy loading
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
const imageUrl = img.dataset.src;
if (imageUrl && !img.src) {
img.setAttribute('data-loading', 'true');
img.src = imageUrl;
observer.unobserve(img);
}
}
});
}, {
rootMargin: '100px' // Load images 100px before they're visible
});
skinEntries.forEach(([paintId, skin], index) => {
const skinItem = document.createElement('div'); const skinItem = document.createElement('div');
skinItem.className = 'skin-item'; skinItem.className = 'skin-item';
skinItem.onclick = () => equipSkin(weaponId, paintId); skinItem.onclick = () => equipSkin(weaponId, paintId);
// Create image element with lazy loading skinItem.innerHTML = `
const img = document.createElement('img'); <img src="${skin.image_url}" alt="${skin.paint_name}" class="skin-image">
img.alt = skin.paint_name; <div class="skin-name">${skin.paint_name}</div>
img.className = 'skin-image'; `;
img.style.minHeight = '300px';
// Only load first 8 images immediately, rest use intersection observer
if (index < 8) {
img.src = skin.image_url;
} else {
// Store URL in data attribute for lazy loading
img.dataset.src = skin.image_url;
imageObserver.observe(img);
}
img.onerror = function() {
console.log('Failed to load image:', skin.image_url);
this.style.background = '#444';
this.removeAttribute('data-loading');
};
img.onload = function() {
this.style.background = 'transparent';
this.removeAttribute('data-loading');
console.log('Successfully loaded image:', skin.image_url);
};
const nameDiv = document.createElement('div');
nameDiv.className = 'skin-name';
nameDiv.textContent = skin.paint_name;
skinItem.appendChild(img);
skinItem.appendChild(nameDiv);
skinGrid.appendChild(skinItem); skinGrid.appendChild(skinItem);
}); });