A képek előzetes betöltésének egyik nagy oka az, ha képet szeretne használni egy elem háttérképéhez egy mouseOver vagy: lebegés eseménynél. Ha csak azt a háttérképet alkalmazza a CSS-ben a: hover állapotra, akkor az a kép csak az első: hover eseményig töltődik be, és így egy rövid bosszantó késés fog eltelni az adott terület fölé kerülő egér és a ténylegesen megjelenő kép között .
1. technika
Töltse be a képet az elem rendes állapotába, csak háttérpozícióval tolja el. Ezután mozgassa a háttér helyzetét az egérrel való megjelenítéshez.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )2. technika
Ha a kérdéses elemnél már van háttérkép, és meg kell változtatnia a képet, akkor a fentiek nem fognak működni. Itt általában egy sprite-ot (kombinált háttérképet) választana, és csak eltolja a háttér helyzetét. De ha ez nem lehetséges, próbálkozzon ezzel. Alkalmazza a háttérképet egy másik oldalelemre, amely már használatban van, de nincs háttérképe.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Az ötlet, hogy új oldalelemeket hozzon létre ehhez az előzetes betöltési technikához, felmerülhet a fejében, például # preload-001, # preload-002, de ez inkább ellentétes a webes szabványok szellemével. Ezért olyan oldalelemeket használ, amelyek már léteznek az oldalon.
Az volt az ötletem, hogy megpróbálom ugyanazt az elemet használni, csak a: pseduo-class után töltsük be a képet, így nem kellett arra számítani, hogy elegendő idegen háttér nélküli kép van az oldalon ahhoz, hogy működjön, de bármilyen okból nem akarta megfelelően betölteni őket.
Több
Nézze meg ezt a cikket néhány további technikával kapcsolatban, beleértve a JavaScript-et is.