Loads images progressively. Level of detail for images
You put images into an array in order of detail (least to most)
Here is an example HTML file and web demo: https://1tsnakers.github.io/ProgressiveImageLoader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressive Image Loader Demo</title>
</head>
<body>
<!-- Container for the progressive image -->
<div id="image-container"></div>
<!-- Include your library -->
<script src=""progressive-image-loader.js"></script>
<script>
// Instantiate the loader
new ProgressiveImageLoader({
container: document.getElementById("image-container"),
images: [
"bad-image.png",
"mid-image.png",
"good-image.png"
],
width: 600, // optional
height: 600, // optional
fadeDuration: 500, // optional
disableCache: false // optional
});
</script>
</body>
</html>In the web demo example, the images are:
Feel free to improve my bad code!