своп малюнка з дапамогай CSS - праблема флікера

Я спрабую памяняць малюнак з дапамогай CSS, але калі мыш зашкальвае ў першы раз, замест таго, каб адзін малюнак замяняецца іншай, я атрымліваю мігаценне першым. Вось мой CSS код:

#UL {
    width: 50px;
    height: 54px;
    background:url("/img/UL_gr.png") no-repeat;     
}
#UL:hover {
    background-image:url("/i/logos/UL.png");        
}
3
Можа быць, малюнак яшчэ не загружаецца?
дададзена аўтар Litek, крыніца

4 адказы

Preload малюнка і выкарыстоўваць спрайты. Праблема вырашана!

2
дададзена
+1 для спрайтов - гэта было б лепшым маршрутам ісці.
дададзена аўтар Shawn Steward, крыніца

Мігаценне адбываецца таму, што выява яшчэ не загружана, вы павінны папярэдне загрузіць яго. Там ёсць некалькі спосабаў зрабіць гэта, ніжэй адзін метад. Яна не паказвае на старонцы, але так як гэта ў целе ён усё роўна будзе загружаць малюнак. Змесціце гэта ніжэй ўсе вашы іншыя матэрыялы, так што не запавольвае загрузку чаго-небудзь яшчэ.

<div style="display:none;">
   
</div>
1
дададзена

Ці з'яўляецца мігаценне магчыма з-за браўзэр спрабуе загрузіць у новым вобразе (UL.png?)

Проста каб убачыць, паспрабаваць дадаючы элемент IMG з «/i/logos/UL.png» у ГКЗ і дысплей: не, як убудаваны стыль. Дадамо, што дзесьці на старонцы і паглядзець, калі гэта дапамагае.

1
дададзена

Прычына, хутчэй за ўсё, што браўзэр яшчэ не загрузіў малюнак. Вы можаце зрабіць папярэдні нацяг, як апісана ў гэтай старонцы .

0
дададзена