52 lines
2.2 KiB
HTML
52 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Regular Image Loading</title>
|
|
<style>
|
|
.image-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
img {
|
|
display: block;
|
|
width: 300px;
|
|
height: 200px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>All images load immediately</h2>
|
|
<div class="image-container" id="image-container"></div>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const imageContainer = document.getElementById('image-container');
|
|
const imageUrls = [
|
|
'https://blog-icoding.ddnsto.com/upload/b178e0eaa1516fe27b3babd932aa37cc80b17472.jpg@942w_930h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/f892d57fedb12065c2b1379eb6f193ab91e9b364.jpg@942w_936h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/710827654220b2e2418aa9b24838974ea8b0f9fd.jpg@942w_921h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/8e5e9700d916e69f69c79cdb5f525d67ee9a3f0d.jpg@942w_927h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/39ab275203860c6fdfaa58d061cc262c7618a459.jpg@942w_923h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/c73b288188420cdc89ab913975fee837c79a058f.jpg@942w_927h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/5ff6100a17234a5b7d4a3e470826d830b358a717.jpg@942w_932h_progressive.jpeg',
|
|
'https://blog-icoding.ddnsto.com/upload/5045ae78e674c40f0f295fdac12b6a9e7a11cce1.jpg@942w_920h_progressive.jpeg',
|
|
];
|
|
|
|
// Initialize 100 images with random URLs
|
|
for (let i = 0; i < 100000; i++) {
|
|
const img = document.createElement('img');
|
|
img.src = imageUrls[Math.floor(Math.random() * imageUrls.length)];
|
|
img.alt = `Random Image ${i + 1}`;
|
|
imageContainer.appendChild(img);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|