Προφόρτωση μόνο εικόνας CSS - CSS-Κόλπα

Ένας μεγάλος λόγος για τη χρήση της προφόρτωσης εικόνας είναι εάν θέλετε να χρησιμοποιήσετε μια εικόνα για την εικόνα φόντου ενός στοιχείου σε ένα ποντίκι πάνω ή: συμβάν αιωρήματος. Εάν εφαρμόσετε μόνο αυτήν την εικόνα φόντου στο CSS για την κατάσταση: hover, αυτή η εικόνα δεν θα φορτωθεί μέχρι το πρώτο: συμβάν αιωρημάτων και επομένως θα υπάρξει μια σύντομη ενοχλητική καθυστέρηση μεταξύ του ποντικιού που περνά πάνω από αυτήν την περιοχή και της εικόνας που εμφανίζεται στην πραγματικότητα .

Τεχνική # 1

Φορτώστε την εικόνα στην κανονική κατάσταση του στοιχείου, αλλάξτε την μόνο με τη θέση φόντου. Στη συνέχεια, μετακινήστε τη θέση του φόντου για να την εμφανίσετε στο δείκτη.

#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )

Τεχνική # 2

Εάν το εν λόγω στοιχείο έχει ήδη εφαρμοστεί μια εικόνα φόντου και πρέπει να αλλάξετε αυτήν την εικόνα, τα παραπάνω δεν θα λειτουργήσουν. Συνήθως θα πας για ένα sprite εδώ (μια συνδυασμένη εικόνα φόντου) και απλά θα αλλάξεις τη θέση του φόντου Αλλά αν αυτό δεν είναι δυνατό, δοκιμάστε αυτό. Εφαρμόστε την εικόνα φόντου σε άλλο στοιχείο σελίδας που χρησιμοποιείται ήδη, αλλά δεν έχει εικόνα φόντου.

#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )

Η ιδέα δημιουργίας νέων στοιχείων σελίδας για χρήση για αυτήν την τεχνική προφόρτωσης μπορεί να εμφανιστεί στο μυαλό σας, όπως # preload-001, # preload-002, αλλά αυτό μάλλον αντίκειται στο πνεύμα των προτύπων ιστού. Εξ ου και η χρήση στοιχείων σελίδας που υπάρχουν ήδη στη σελίδα σας.

Είχα την ιδέα να προσπαθήσω να χρησιμοποιήσω το ίδιο στοιχείο, να χρησιμοποιήσω μόνο το: μετά το pseduo-class για να φορτώσω την εικόνα, οπότε δεν χρειάζεται να βασίζεσαι στην ύπαρξη αρκετών εξωγενών εικόνων χωρίς φόντο στη σελίδα σου για να δουλέψεις, αλλά για οποιονδήποτε λόγο δεν ήθελαν να τα φορτώσουν σωστά.