it-swarm-eu.dev

Jak předběžně načítat obrázky používané pouze při přechodu?

Mám odkaz, který začíná jedním obrázkem na pozadí a poté se změní na najetí na jiný. Oba obrázky na pozadí jsou nastaveny v CSS. Zdá se, že moje prohlížeče (žádný z nich) nenačítají obraz vznášející se, dokud se ve skutečnosti nerozhodnete. Ale pak skončíte s prázdným obrázkem na několik sekund (při mém velmi pomalém připojení) je potřeba načíst nový. Existuje způsob, jak povzbudit prohlížeč, aby předběžně načítal obraz vznášejícího se, aby na vznášení nenastal čas zpoždění?

cssimagesload-time
14
Daniel Bingham

1) Použijte CSS Sprites (Toto je preferovaná metoda).

2) Vložte obrázky do skrytého oddílu. Umístěte obrázky do divu a poté nastavte CSS div na display: none;, abyste jej skryli.

3) Načíst obrázky 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) Použijte tento 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>
17
John Conde

Opravdu se mi nelíbí javascriptové řešení - je to chaotický, obtížný na údržbu a samozřejmě zcela selže, když je JS deaktivováno.

Moderní řešení je používat CSS Sprites - zkuste to, věřte mi, budete se divit, proč jste to nikdy předtím neudělali;)

10
dmp

Našel jsem tento odkaz, jak předběžně načítat obrázky pomocí čistě CSS:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

A fungovalo to pro mě, když musím změnit různé obrázky na pozadí na vznášedlo.

0
Sheena Katrina