Jednym z głównych powodów używania wstępnego ładowania obrazu jest to, że chcesz użyć obrazu jako obrazu tła elementu w zdarzeniu mouseOver lub: hover. Jeśli zastosujesz ten obraz tła w CSS tylko dla stanu: hover, ten obraz nie zostanie załadowany aż do zdarzenia first: hover, a zatem wystąpi krótkie irytujące opóźnienie między przesuwaniem myszy nad tym obszarem a wyświetlaniem obrazu .
Technika nr 1
Załaduj obraz na zwykły stan elementu, przesuń go tylko z pozycją w tle. Następnie przesuń położenie tła, aby wyświetlić je po najechaniu kursorem.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Technika nr 2
Jeśli dany element ma już zastosowany obraz tła i musisz go zmienić, powyższe nie zadziała. Zazwyczaj wybrałbyś tutaj sprite'a (połączony obraz tła) i po prostu przesunąłbyś pozycję tła. Ale jeśli to nie jest możliwe, spróbuj tego. Zastosuj obraz tła do innego elementu strony, który jest już używany, ale nie ma obrazu tła.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Pomysł stworzenia nowych elementów strony do wykorzystania w tej technice wstępnego ładowania może przyjść do głowy, jak # preload-001, # preload-002, ale jest to raczej sprzeczne z duchem standardów sieciowych. Stąd użycie elementów strony, które już istnieją na Twojej stronie.
Wpadłem na pomysł, aby spróbować i użyć tego samego elementu, użyj tylko klasy: after pseduo do załadowania obrazu, więc nie musisz polegać na wystarczającej ilości obcych obrazów bez tła na stronie do pracy, ale z jakiegoś powodu nie chciał ich poprawnie załadować.
Jeszcze
Zapoznaj się z tym artykułem, aby poznać więcej technik, w tym JavaScript.