# 051: Ομαλή φόρτωση γκαλερί, μέρος 1 - CSS-Κόλπα

Anonim

Έχουμε τη διάταξη πλέγματος για το Gallery. Δυστυχώς, η φόρτωσή του είναι λίγο απότομη και περίεργη. Αυτό συμβαίνει επειδή οι στήλες CSS3 έχουν σχεδιαστεί για να κατανέμουν ομοιόμορφα το περιεχόμενο μεταξύ κάθε στήλης, αλλά μερικές φορές απαιτείται χρόνος για να φορτωθούν οι εικόνες και δεν έχουν ακόμη πλάτος / ύψος για χρήση. Έτσι, όταν εμφανίζονται, οι στήλες πρέπει να αναδιοργανωθούν.

Νομίζω, ωστόσο, ότι μπορούμε να αποτρέψουμε αυτήν την αδυναμία με κάποια JavaScript. Εφόσον γνωρίζουμε το ύψος και το πλάτος των εικόνων, μπορούμε να δημιουργήσουμε ένα πλαίσιο με τη σωστή αναλογία διαστάσεων για να το τοποθετήσουμε ως σύμβολο κράτησης θέσης. Στη συνέχεια, όταν φορτωθεί η εικόνα, θα αντικαταστήσουμε το σύμβολο κράτησης θέσης με την εικόνα.

Μέχρι το τέλος του βίντεο είμαστε στο σωστό δρόμο, αλλά είναι λίγο σπασμένο. Μην ανησυχείτε, θα το διορθώσουμε στο επόμενο βίντεο.