Pure CSS spinner in reality
... with CSS & javascript ...
- Repeat in Firefox/Chrome (empty cache / hard reload): Ctrl + Shift + R; in IE-11: Ctrl + F5; see cache-test for more.
Scale Model 1
Scale Model 2
CSS fun
Former Pond
Calm Afternoon
Realisation
- We can add an attribute onerror="show404(this)" to each image in a imgBox. With javascript
enabled, now we can say for sure that an image is missing.
The show404(this) function can add a class="missingImg" to the imgBox. Then with CSS we can arrange that the spinner is hidden in that case, and the (new) message "Oops" doesn't need a delay. - Note! The function show404(this) for missing images (if any) has to be declared in the
<head> of the document. It is triggered immediately by the onerror attribute in the code
of an image in the HTML; putting this function in a script at the end is too late! The execution of a script over there has to wait until
the DOM is loaded, but browsers have seen a missing image before that, and have taken their action already on the fly when the HTML-line with
the missing image-src is downloaded.
The rest of the script can be safely at the bottom of the document (before the </body> tag), the right place for a non-blocking script. - In order to decide if an image is downloaded before giving a fade-in to the image, it seems obvious to use an
onload="..." function, but here is a complication.
Everything is OK at a first load of an image, but it is problematic for a repeated visit to the page or a visit to another page with the same image.
Some browsers (and/or depending of the user settings) say at a second visit: The "onload" is already finished (or I repeat the download), so I don't have to wait and I can fade in the image.
While other browsers or other settings say at a second visit: No, the "onload" function does not apply, for the image is already in the cache and nothing has to be downloaded. Then there will be an ever spinning spinner, no fade-in, and no image at all... - But with img.complete (false/true) we can check if the image is complete aboard, regardless the way of arriving (onload or in cache). So we can travel along all images in a imgBox, clone them (in order to check each of the images apart), and decide when a spinner is needed and when the image can fade in.
New time table:
- The javascript starts immediately with adding a class="javascripted" to the <body>. With that class the CSS-only styles can be overruled (reset/changed).
- Second operation is labelling the imgBoxes of 404-images (if any) with the extra class="missingImg".
Note: the img.complete (false/true) has also the "true" result for a missing image! - With the labelling first, now we can safely check the arrivals of the existing images. - The function imgCompleteCheck(){...} is following the next procedure for each of the existing images.
- At 0 sec: Reset the opacity and animation individually for each img (for later individual change), and give each img his own thisSpinnerTimer=0. Then the function checkThisImg(){...} can start. With a clone of the img the timer is running!
- With a timeOut of 50ms the check is repeated, as long as the image isn't complete yet. Crossing the border of 1.1s of the timer, it appears to be a slow loading image, and the spinner is fading in. The checking goes on.
- If the image is complete within 1.1s, it was fast loaded or already in cache: it had no spinner, and can fade in quickly.
- If the image is complete after 1.1s, it was a slow loading image with a spinner. First the spinner is fading out, then the image is fading in.
- In both cases the temporary clone can disappear, and the timeOut of this image can be cleared.
Construction
<!DOCTYPE html>
<html lang="...">
<head>
...
<link rel="stylesheet" href="technix/spinner-styles.css">
<script>
function show404(n) {
n.parentNode.className
= n.parentNode.className + " missingImg";
}
</script>
</head>
<body>
...
<div class="imgBox">
<div class="spinner"></div>
<img src="images/..." alt="..." onerror="show404(this)">
</div>
...
<div class="imgBox">
<div class="spinner"></div>
<img src="images/..." alt="..." onerror="show404(this)">
</div>
...
<script src="technix/spinner-script.js"></script>
</body>
</html>
/* spinner-script.js */
document.body.className
= document.body.className
+ " javascripted";
setTimeout(imgCompleteCheck,100);
function imgCompleteCheck(){
var allImgs
= document.getElementsByTagName("img");
for (var i=0; i<allImgs.length; i++){
if(allImgs[i].parentNode.className
=== "imgBox"){
let thisImg=allImgs[i];
thisImg.style.opacity=0;
thisImg.style.animation="none";
let thisSpinnerTimer=0;
checkThisImg();
function checkThisImg(){
let tmpImg = new Image();
tmpImg.src = thisImg.src;
let timeOutThisCheck;
if(tmpImg.complete == false){
if (thisSpinnerTimer == 1100){
// slow loading
thisImg.parentNode.className
= "imgBox spinnerStart";
}
thisSpinnerTimer
= thisSpinnerTimer+50;
timeOutThisCheck
= setTimeout(checkThisImg, 50);
}
else {
if (thisSpinnerTimer < 1100){
// fast loaded
thisImg.style.animation
= ".5s .5s spinnerFadeIn
ease-in forwards";
}
else { // slow loaded
thisImg.parentNode.className
= "imgBox loadingFinished";
thisImg.style.animation
= "1.5s .5s spinnerFadeIn
ease-in forwards";
}
tmpImg.src = "";
clearTimeout(timeOutThisCheck);
}
}
}
}
}
.imgBox { /* styles as before */ }
.spinner { /* styles as before */ }
/* resetting styles if javascript is enabled: */
.javascripted .imgBox:before {
content: "... Image is loading ...";
left: 50%;
margin-left: -4.7em;
right: auto;
color: green;
}
.javascripted .imgBox:before,
.javascripted .imgBox:after,
.javascripted .spinner {
display: none; animation: none;
}
/* extra classes if javascript is enabled:
.imgBox.missingImg:after {
display: block;
content: "Oops, this image is missing ...";
animation: 2s spinnerFadeIn ease-in-out forwards;
}
.imgBox.spinnerStart:before {
display: block;
animation: 1s 1s spinnerFadeIn ease-in-out forwards;
}
.imgBox.loadingFinished:before {
display: block;
animation: .8s spinnerFadeOut ease-in forwards;
}
.imgBox.loadingFinished .spinner {
display: block;
animation: 1.5s spinning linear 10,
.8s spinnerFadeOut ease-in forwards;
}
Files
The basic styles of the imgBox are in the separate spinner-styles.css and spinner-script.js