Jak wstępnie załadować obrazy używane tylko po najechaniu kursorem?

14

Mam link, który zaczyna się od jednego obrazu tła, a następnie zmienia się po najechaniu kursorem na inny. Oba obrazy tła są ustawione w CSS. Moje przeglądarki (dowolna z nich) wydają się nie ładować obrazu aktywowanego, dopóki go nie najedziesz. Ale potem pojawia się pusty obraz przez kilka sekund (w moim bardzo wolnym połączeniu) potrzeba do załadowania nowego. Czy istnieje sposób, aby zachęcić przeglądarkę do wstępnego ładowania obrazu aktywowanego, aby opóźnienie nie występowało podczas aktywowania?

css images load-time Daniel Bingham
źródło

Odpowiedzi:

17

1) Użyj duszka CSS (jest to preferowana metoda).

2) Załaduj obrazy do ukrytego div. Umieść obrazy w div, a następnie ustaw CSS div, aby display: none;go ukryć.

3) Załaduj obrazy za pomocą CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Użyj tego JavaScript

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>
John Conde
źródło
Czy istnieje sposób na załadowanie ich po załadowaniu strony? Więc użytkownik nie widzi koła ładującego na kursorze? Jednym ze sposobów byłoby posiadanie ukrytej ramki, która używa javascript do opóźnienia wyświetlania ukrytej ramki, na przykład w moim pytaniu stackoverflow.com/questions/13437091/…, ale czy istnieje preferowana metoda opóźniania i nie wyświetlania koła ładowania na tym kursorze ?
powstanie przeciwko
Nieważne, znalazłem ten perishablepress.com/3-ways-preload-images-css-javascript-ajax i działa bezbłędnie z opóźnieniem czasowym.
powstanie przeciwko
10

Naprawdę nie lubię rozwiązania javascript - jest niechlujne, trudne w utrzymaniu i oczywiście całkowicie zawiedzie, gdy JS jest wyłączone.

Nowoczesne rozwiązanie polega na użyciu duszków CSS - spróbuj, uwierz mi, będziesz się zastanawiać, dlaczego nigdy wcześniej tego nie robiłeś;)

dmp
źródło
0

Dodaj to powyżej swojego CSS:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Jeśli wybierzesz trasę duszka, jak sugeruje danp, nadal masz problem z ładowaniem duszka, zanim będzie on potrzebny. To powiedziawszy, że kocham duszki; aby je łatwo zrobić, używam narzędzia Spriteme od Steve'a Soudersa:

Nisse Engström
źródło