Ασύγχρονη φόρτωση εικόνων στο JavaScript

Οι εικόνες που δημιουργούνται δυναμικά μέσω JavaScript, φορτώνονται επίσης ασύγχρονα. Ας εξετάσουμε για παράδειγμα τον ακόλουθο κώδικα:

let image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

Όπως βλέπετε, εδώ δημιουργούμε την ετικέτα img, γράφουμε στο src της τη διαδρομή προς την εικόνα και τοποθετούμε αυτήν την εικόνα στο body. Ωστόσο, η εικόνα δεν θα εμφανιστεί αμέσως στη σελίδα. Το γεγονός είναι ότι όταν γράψαμε στο src τη διαδρομή προς την εικόνα - το πρόγραμμα περιήγησης αρχίζει να κατεβάζει αυτήν την εικόνα από τον ιστότοπο. Μόλις η εικόνα κατεβεί, μόνο τότε το πρόγραμμα περιήγησης θα μπορέσει να την εμφανίσει.

Εάν η εικόνα είναι αρκετά μεγάλη, και η ταχύτητα διαδικτύου αρκετά μικρή, τότε ο χρήστης του ιστότοπου για κάποιο χρονικό διάστημα θα μπορέσει να "θαυμάσει" μια κενή εικόνα - μέχρι να φορτωθεί.

Στην πραγματικότητα, η ετικέτα img έχει το συμβάν load, που ενεργοποιείται όταν ολοκληρωθεί η φόρτωση της εικόνας:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	// θα ενεργοποιηθεί όταν φορτωθεί η εικόνα
});

Μπορούμε να το χρησιμοποιήσουμε αυτό, για να τοποθετήσουμε την εικόνα στη σελίδα, μόνο όταν αυτή η εικόνα έχει φορτωθεί:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image); // τοποθετούμε όταν φορτωθεί
});

Η εικόνα δεν είναι απαραίτητο να φορτωθεί: μπορεί να συμβεί ότι η διαδρομή προς την εικόνα είναι λανθασμένη, ή να υπάρξει διακοπή του διαδικτύου, βλάβη του διακομιστή του ιστότοπου ή κάτι παρόμοιο. Με άλλα λόγια - εξαιρετική κατάσταση. Σε αυτήν την περίπτωση, δεν θα ενεργοποιηθεί το συμβάν load, αλλά το συμβάν error:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// σφάλμα φόρτωσης εικόνας
});

Δημιουργήστε ένα κουμπί, upon pressing which θα φορτώνεται μια εικόνα. Εμφανίστε την εικόνα, όταν θα έχει φορτωθεί. Εμφανίστε ένα μήνυμα σε περίπτωση προβλημάτων με τη φόρτωση της εικόνας.