Ladda in bilder med CSS

Hej

Här ska jag visa er ett tips på hur man kan ladda in, eller förladda, några bilder på sidan med hjälp av CSS istället för att använda JavaScript.

Först skapar du en DIV:

<div id="imgLoader"></div>

Och i CSS koden lägger du sedan först denna kod:

.imgLoader {
background:url(bild1.jpg) no-repeat;
background:url(bild2.jpg) no-repeat;
margin-left:10000px;

Det som händer är att vi skapar en DIV och placerar den utanför skärmen. Då kommer bilden att laddas. Självklart kan du lägga till fler bilder att ladda in i sidan.

Detta tips skapades 2008-08-09 14:45:28 av Shadi. Det har lästs 540 gånger. ||

Kommentarer

phiper sa den 9 augusti 2008 kl 14:55:

Tack! Kan komma väl till pass!

frisko sa den 9 augusti 2008 kl 16:02:

Smart, smart!

voigtan sa den 9 augusti 2008 kl 20:46:

Tyvärr så tycker jag det kan vara ett problem: Ibland kommer den "tvinga" användaren att ladda in bilder som användaren aldrig kommer att få se på sidan. Det viktigaste när det gäller bilder och hemsidor idag är: att så få anrop som möjligt anropas. Det är därför man idag "mappar" upp 1 bild med flera bilder och positionera det med CSS. Det man tjänar på är inte bara storlek (ju fler bilder ju större utrymme kan det faktist ta) och man tjänar också in antal anrop mot servern. Sen är jag lite osäker på alla webbläsare om dom inte skriver över inladdningen av egenskaperna i en css anrop, att den egentligen bara kommer generera bild2.jpg för det är det sista egenskaps ändringen i filen.