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

Enhance skin loading in index.php with lazy loading implementation for improved performance; update style.css to adjust dimensions and styling of skin images and modal overlay for better UI experience.

Browse Source
This commit is contained in:
Bram Suurd
2025-06-29 22:54:19 +02:00
parent dd7f45902b
commit e540e1e8e3
2 changed files with 47 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
website/index.php
View File

@@ -486,17 +486,49 @@ if (isset($_SESSION['steamid'])) {
// Clear previous skins // Clear previous skins
skinGrid.innerHTML = ''; skinGrid.innerHTML = '';
// Populate skins // Populate skins with lazy loading
Object.entries(skinsData[weaponId]).forEach(([paintId, skin]) => { const skinEntries = Object.entries(skinsData[weaponId]);
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);
skinItem.innerHTML = ` // Create image element with lazy loading
<img src="${skin.image_url}" alt="${skin.paint_name}" class="skin-image"> const img = document.createElement('img');
<div class="skin-name">${skin.paint_name}</div> img.alt = skin.paint_name;
`; img.className = 'skin-image';
// Add loading placeholder
img.style.background = 'linear-gradient(145deg, #333, #222)';
img.style.minHeight = '180px';
// Lazy load: only load first 12 images immediately, rest on scroll/delay
if (index < 12) {
img.src = skin.image_url;
} else {
// Load after a delay or when scrolled into view
setTimeout(() => {
img.src = skin.image_url;
}, index * 50); // Stagger loading
}
img.onerror = function() {
console.log('Failed to load image:', skin.image_url);
this.style.background = '#333';
this.style.content = '""';
};
img.onload = function() {
this.style.background = 'transparent';
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);
}); });

13
website/style.css
View File

@@ -403,8 +403,9 @@ body {
} }
.overlay-content { .overlay-content {
width: 900px; width: 1000px;
height: 600px; height: 700px;
max-height: 85vh;
} }
.modal-content { .modal-content {
@@ -471,10 +472,14 @@ body {
.skin-item .skin-image { .skin-item .skin-image {
width: 100%; width: 100%;
height: 250px; height: 180px;
object-fit: contain; object-fit: contain;
background: linear-gradient(145deg, #333, #222); background: linear-gradient(145deg, #333, #222);
padding: 0.5rem; padding: 0.75rem;
display: block;
box-sizing: border-box;
transform: scale(1.2);
transform-origin: center;
} }
.skin-name { .skin-name {