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

Πίνακας περιεχομένων

Στα οποία καταλαβαίνουμε τα προβλήματα που αντιμετωπίζαμε με τη σωστή φόρτωση της διάταξης στηλών. Η επιδιόρθωση ήταν να αφαιρεθεί το CSS που έκανε την αναλογία διαμόρφωσης να διατηρούν τα πλαίσια κράτησης θέσης λειτουργούν μόλις φορτωθεί η εικόνα (η οποία διατηρεί τον λόγο διαστάσεων από μόνη της). Στη συνέχεια, εφαρμόστε μια κλάση CSS για να κάνετε τη λειτουργία "fade in" (αλλαγή αδιαφάνειας από 0 σε 1). Εύκολο τυρί και απλώς μια κούπα JavaScript.

Πρέπει να σημειωθεί ότι στη ζωντανή έκδοση του ιστότοπου, δυστυχώς, αυτή η δροσερή τεχνική δεν θα λειτουργούσε. Για να είναι πραγματικά αποτελεσματικό, πρέπει να γνωρίζουμε την αναλογία διαστάσεων της πλευράς του διακομιστή εικόνων, μπορούμε να δημιουργήσουμε το πλέγμα αμέσως με τα σωστά σύμβολα κράτησης θέσης. Δυστυχώς, δεν έχουμε στη διάθεσή μας αυτές τις πληροφορίες στην πραγματική γκαλερί. Μπορούμε να χρησιμοποιήσουμε την PHP για να πάρουμε τις διαστάσεις, αλλά είναι πολύ αργή. Αντ 'αυτού, περιμένουμε τη φόρτωση όλων των εικόνων και στη συνέχεια ξεθωριάζει στην αδιαφάνεια τους. Όχι τόσο δροσερό και λίγο πιο αργό, αλλά τουλάχιστον λιγότερο φόρτωση janky-ness.

ενδιαφέροντα άρθρα...