CSS за презареждане на картинки

fix3d трудност:

видян: 10182

Принципът за презареждане на картинки е прост: от началото, което започне да се зарежда html кода на страницата големите картинки се зареждат в паметта (не не можете да ги видите), така че при повторно използване не е нужно да се зареждат на ново.

За това по-принцип се използва javascript.

Много е подходящо за картинките на първа страница, които се използват в останалата част от страницата.

Също така е много полезен за предварително зареждане на картинки, които използвате за "hover" (когато мишката е в/у дадена картинка тя да се сменя).

За презареждане на картинките ще използваме само CSS.

Принципа е много прост: трика е да заредите картинките в началото без да ги показвате. За целта се използва css атрибута: display :none.
Поставете css кода директно в тага на картинката. Поставете таговете за картинките, които трябва да се презаредят след тага:

Празните АЛТ тагове са важни, за да са невидими картинките за браузъра.

Старите браузъри като Netscape 4 не разпознават атрибута "display: none" и ще покажат скритите картинки.

Друг начин:

Някой версии на Internet Explorer възприемат "display: none" буквално и не изчитат въобще картинките (и не се записват в паметта)

Друг начин да се заобиколи това неудобство е да се зареждат картинките в началото на файла, където никой няма да ги види. Примерно -5000 пиксела от върха на страницата.

Използвайте "position: absolute" за да позиционирате картинки там където няма да се видят от никого.



Ако виждате този текст значи, че браузърът ви не поддържа CSS.

Сподели урока:

Коментари (2)

boranoff на 10.05 2006 в 12:48ч.

Има и друг начин за презареждане, който е изцяло през css, без да се нарушава много структурата на html-a ви.
#preloadimages {
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();
}

а добавяте само

в html-а си

boranoff на 10.05 2006 в 12:49ч.

не съобразих че ще изреже таговете :-) ето продължението, надявам се че сега ще стане ;-)
<div id="preloadimages"></div>

CSS за презареждане на картинки

Коментари (2)

Регистрирайте се, за да добавите коментар