Skip to content

Commit e1894e4

Browse files
umar-sofyrusumar-sofyrus
committed
slow loading page
1 parent b931244 commit e1894e4

2 files changed

Lines changed: 314 additions & 3 deletions

File tree

‎index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,17 @@ <h1>Welcome to the Testing Website</h1>
3434
<p>Select a page to explore:</p>
3535

3636
<a href="shadow_dom_test.html">Shadow DOM Testing Playground</a>
37-
3837
<a href="iframe_page.html">Nested Iframes Page</a>
3938
<a href="simple_page.html">Simple Iframes Page</a>
4039

4140
<button onclick="openNewTab()">Open New Page in Tab</button>
42-
4341
<button onclick="window.location.href='instant_page.html'">Navigate Instantly</button>
4442

43+
<!-- ✅ New Button for Slow Test Page -->
44+
<button onclick="window.location.href='slow_test_page.html'">
45+
Open Slow Loading Test Page
46+
</button>
47+
4548
<h2>Interactive Elements</h2>
4649
<label for="selectBox">Choose an option:</label>
4750
<select id="selectBox" onchange="displaySelection()">
@@ -75,4 +78,4 @@ <h2>Interactive Elements</h2>
7578
}
7679
</script>
7780
</body>
78-
</html>
81+
</html>

‎slow_test_page.html‎

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>60 Second Load Test</title>
7+
8+
<!-- Heavy CSS Libraries -->
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css">
13+
14+
<style>
15+
body {
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18+
color: white;
19+
text-align: center;
20+
padding: 2rem;
21+
}
22+
.container { max-width: 1400px; margin: 0 auto; }
23+
h1 { font-size: 3rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
24+
.status {
25+
background: rgba(255,255,255,0.2);
26+
padding: 1.5rem;
27+
border-radius: 12px;
28+
margin: 2rem 0;
29+
backdrop-filter: blur(10px);
30+
}
31+
.progress-bar {
32+
width: 100%;
33+
height: 30px;
34+
background: rgba(255,255,255,0.3);
35+
border-radius: 15px;
36+
overflow: hidden;
37+
margin: 1rem 0;
38+
}
39+
.progress-fill {
40+
height: 100%;
41+
background: linear-gradient(90deg, #00ff87, #60efff);
42+
width: 0%;
43+
transition: width 0.5s;
44+
}
45+
iframe {
46+
width: 100%;
47+
max-width: 600px;
48+
height: 400px;
49+
border: 3px solid rgba(255,255,255,0.3);
50+
margin: 10px;
51+
border-radius: 8px;
52+
background: white;
53+
}
54+
img {
55+
width: 100%;
56+
max-width: 500px;
57+
height: auto;
58+
border: 2px solid rgba(255,255,255,0.3);
59+
border-radius: 8px;
60+
margin: 8px;
61+
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
62+
}
63+
.grid {
64+
display: grid;
65+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
66+
gap: 15px;
67+
margin: 2rem 0;
68+
}
69+
</style>
70+
</head>
71+
<body>
72+
<div class="container">
73+
<h1>⏱️ 60 SECOND LOAD TEST</h1>
74+
75+
<!-- Interactive Test Section -->
76+
<div style="background: rgba(255,255,255,0.15); padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem;">
77+
<h3>🎮 Responsiveness Test</h3>
78+
<p style="font-size: 0.9rem; margin-bottom: 1rem;">Try clicking the button or typing while the page loads!</p>
79+
80+
<div style="display: flex; gap: 1rem; justify-content: center; align-items: center; flex-wrap: wrap;">
81+
<button id="testButton" style="
82+
padding: 12px 24px;
83+
font-size: 16px;
84+
font-weight: bold;
85+
background: linear-gradient(135deg, #667eea, #764ba2);
86+
color: white;
87+
border: 2px solid white;
88+
border-radius: 8px;
89+
cursor: pointer;
90+
transition: transform 0.2s, box-shadow 0.2s;
91+
" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
92+
Click Me!
93+
</button>
94+
95+
<input id="testInput" type="text" placeholder="Type something..." style="
96+
padding: 12px;
97+
font-size: 16px;
98+
border: 2px solid white;
99+
border-radius: 8px;
100+
background: rgba(255,255,255,0.9);
101+
color: #333;
102+
min-width: 200px;
103+
">
104+
</div>
105+
106+
<div id="interactionFeedback" style="
107+
margin-top: 1rem;
108+
min-height: 60px;
109+
font-size: 1.1rem;
110+
font-weight: bold;
111+
color: #00ff87;
112+
text-shadow: 0 0 10px rgba(0,255,135,0.5);
113+
"></div>
114+
</div>
115+
116+
<div class="status">
117+
<h2>Loading Status</h2>
118+
<div id="statusText">Initializing load sequence...</div>
119+
<div class="progress-bar">
120+
<div class="progress-fill" id="progressBar"></div>
121+
</div>
122+
<div id="timer">Time Elapsed: 0s</div>
123+
</div>
124+
125+
<h2>Phase 1: Massive Image Load (200 Images)</h2>
126+
<div class="grid" id="imageGrid"></div>
127+
128+
<h2>Phase 2: Wikipedia Iframes (27 Total)</h2>
129+
<div class="grid" id="wikiIframes"></div>
130+
131+
<h2>Phase 3: YouTube Videos (10)</h2>
132+
<div class="grid" id="videoIframes"></div>
133+
</div>
134+
135+
<!-- Blocking script loads -->
136+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
137+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
138+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
139+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js"></script>
140+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
141+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
142+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
143+
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js"></script>
144+
145+
<script>
146+
let startTime = Date.now();
147+
let buttonClickCount = 0;
148+
149+
// Button click handler
150+
document.getElementById('testButton').addEventListener('click', function() {
151+
buttonClickCount++;
152+
const feedback = document.getElementById('interactionFeedback');
153+
feedback.innerHTML = `✅ Button clicked! (Click #${buttonClickCount})<br><small>Page is still loading but interactions work!</small>`;
154+
155+
// Add visual feedback
156+
this.style.background = 'linear-gradient(135deg, #00ff87, #60efff)';
157+
setTimeout(() => {
158+
this.style.background = 'linear-gradient(135deg, #667eea, #764ba2)';
159+
}, 200);
160+
});
161+
162+
// Input handler
163+
document.getElementById('testInput').addEventListener('input', function(e) {
164+
const feedback = document.getElementById('interactionFeedback');
165+
if (e.target.value.length > 0) {
166+
feedback.innerHTML = `⌨️ You typed: "<span style="color: #60efff;">${e.target.value}</span>"<br><small>Input is responsive even during heavy loading!</small>`;
167+
} else {
168+
feedback.innerHTML = '';
169+
}
170+
});
171+
172+
function updateStatus(message, percent) {
173+
document.getElementById('statusText').textContent = message;
174+
document.getElementById('progressBar').style.width = percent + '%';
175+
}
176+
177+
function updateTimer() {
178+
const elapsed = Math.floor((Date.now() - startTime) / 1000);
179+
document.getElementById('timer').textContent = `Time Elapsed: ${elapsed}s`;
180+
}
181+
setInterval(updateTimer, 1000);
182+
183+
// Phase 1: Initial image load (200 huge images)
184+
updateStatus('Phase 1: Loading 200 massive images...', 10);
185+
const imageGrid = document.getElementById('imageGrid');
186+
for (let i = 1; i <= 200; i++) {
187+
const img = document.createElement('img');
188+
img.src = `https://picsum.photos/4000/3000?random=${i}`;
189+
img.loading = 'eager';
190+
imageGrid.appendChild(img);
191+
}
192+
193+
// Phase 2: Wikipedia iframes at 10s (12 pages)
194+
setTimeout(() => {
195+
updateStatus('Phase 2: Loading 12 Wikipedia pages...', 30);
196+
const wikiContainer = document.getElementById('wikiIframes');
197+
const wikiPages = [
198+
'Artificial_intelligence', 'Machine_learning', 'Deep_learning', 'Neural_network',
199+
'Computer_science', 'Algorithm', 'Operating_system', 'Database',
200+
'Computer_network', 'Quantum_computing', 'Blockchain', 'Cybersecurity'
201+
];
202+
wikiPages.forEach(page => {
203+
const iframe = document.createElement('iframe');
204+
iframe.src = `https://en.wikipedia.org/wiki/${page}`;
205+
wikiContainer.appendChild(iframe);
206+
});
207+
}, 10000);
208+
209+
// Phase 3: More Wikipedia pages at 25s (15 more heavy pages)
210+
setTimeout(() => {
211+
updateStatus('Phase 3: Loading 15 more Wikipedia pages...', 50);
212+
const wikiContainer = document.getElementById('wikiIframes');
213+
const moreWikiPages = [
214+
'Data_science', 'Cloud_computing', 'Software_development',
215+
'Internet', 'World_Wide_Web', 'Python_(programming_language)',
216+
'JavaScript', 'Compiler', 'Virtual_machine',
217+
'Computer_graphics', 'Artificial_neural_network', 'Big_data',
218+
'Information_technology', 'Computer_programming', 'Web_browser'
219+
];
220+
moreWikiPages.forEach(page => {
221+
const iframe = document.createElement('iframe');
222+
iframe.src = `https://en.wikipedia.org/wiki/${page}`;
223+
wikiContainer.appendChild(iframe);
224+
});
225+
}, 25000);
226+
227+
// Phase 4: YouTube videos at 40s (10 videos)
228+
setTimeout(() => {
229+
updateStatus('Phase 4: Loading 10 YouTube videos...', 70);
230+
const videoContainer = document.getElementById('videoIframes');
231+
const videoIds = [
232+
'dQw4w9WgXcQ', 'jNQXAC9IVRw', 'kJQP7kiw5Fk', 'FTQbiNvZqaY',
233+
'9bZkp7q19f0', 'ZZ5LpwO-An4', '60ItHLz5WEA', 'fJ9rUzIMcZQ',
234+
'2Vv-BfVoq4g', 'L_jWHffIx5E'
235+
];
236+
videoIds.forEach(id => {
237+
const iframe = document.createElement('iframe');
238+
iframe.src = `https://www.youtube.com/embed/${id}?autoplay=0&controls=1`;
239+
iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
240+
iframe.allowFullscreen = true;
241+
videoContainer.appendChild(iframe);
242+
});
243+
}, 40000);
244+
245+
// Phase 5: More images at 52s
246+
setTimeout(() => {
247+
updateStatus('Phase 5: Loading final batch of 100 images...', 85);
248+
for (let i = 201; i <= 300; i++) {
249+
const img = document.createElement('img');
250+
img.src = `https://picsum.photos/4500/3500?random=${i}`;
251+
imageGrid.appendChild(img);
252+
}
253+
}, 52000);
254+
255+
// Phase 6: Heavy scripts at 56s
256+
setTimeout(() => {
257+
updateStatus('Phase 6: Loading massive JavaScript libraries...', 95);
258+
const heavyScripts = [
259+
'https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js',
260+
'https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js',
261+
'https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.11/vue.global.prod.min.js',
262+
'https://cdnjs.cloudflare.com/ajax/libs/tensorflow/4.15.0/tf.min.js'
263+
];
264+
265+
heavyScripts.forEach(src => {
266+
const script = document.createElement('script');
267+
script.src = src;
268+
document.body.appendChild(script);
269+
});
270+
}, 56000);
271+
272+
// CPU intensive operations every 15s
273+
let cpuInterval = setInterval(() => {
274+
let result = 0;
275+
for (let i = 0; i < 3e8; i++) {
276+
result += Math.sqrt(i) * Math.sin(i);
277+
}
278+
console.log('CPU burn:', result);
279+
}, 15000);
280+
281+
// Complete at 60s
282+
setTimeout(() => {
283+
updateStatus('✅ COMPLETE! 60 seconds of pure loading torture!', 100);
284+
clearInterval(cpuInterval);
285+
}, 60000);
286+
287+
console.log('🔥 60-SECOND LOAD TEST STARTED!');
288+
console.log('Resources: 300 images, 27 Wikipedia pages, 10 YouTube videos, 12 JS libraries');
289+
</script>
290+
291+
<div style="margin-top: 3rem; padding: 2rem; background: rgba(255,255,255,0.1); border-radius: 12px;">
292+
<h2>⚠️ Warning</h2>
293+
<p>This page takes exactly 60 seconds to fully load with:</p>
294+
<ul style="text-align: left; max-width: 600px; margin: 1rem auto;">
295+
<li>300 ultra-high resolution images (4000x3000px+)</li>
296+
<li>27 complete Wikipedia pages in iframes</li>
297+
<li>10 YouTube video players</li>
298+
<li>12 massive JavaScript libraries</li>
299+
<li>Continuous CPU-intensive calculations</li>
300+
</ul>
301+
<p><strong>Browser spinner will run for the full 60 seconds!</strong></p>
302+
</div>
303+
304+
<p style="margin-top: 2rem; font-size: 1.5rem;">
305+
⏱️ <strong>Optimized for exactly 1 minute of loading!</strong>
306+
</p>
307+
</body>
308+
</html>

0 commit comments

Comments
 (0)