The Diary
Дневникът на Георги
<- Понеделник, 2 Февруари 2009 | Начална страница | Сряда, 4 Февруари 2009 ->
Вторник, 3 Февруари 2009
В продължаващата оптимизация на проекта, по който работя, стигнах и до намаляването на броя картинки, които се зареждат от сървърите. На всички е ясно, че намаляването на броя заявки автоматично намалява и времето за зареждане на страницата. Тъй като повечето клиенти така или иначе са без кеш, javascript и css винаги ги слагам inline в документа и разчитам на mod_deflate, да свали размера, което той прави чудесно, но пък остава проблема с многото (> 3-4) картинки, които трябва да се зареждат.
Разбира се има решение и то е известно като CSS Sprites. Накратко тази техника позволява да сложите всички картинки в едно голямо изображение, след което за всяка картинка да създадете отделен css class където е посочен background-image с x/y отместване и ширина/големина.
Из нета ще намерите доста css sprites генератори, но повечето или не правят това, което трябва или го правят твърде сложно. Пък и кой има нервите да ползва някаква online утилка, когато функционалността може да се постигне в локален сто редов скрипт?
Написал съм си такъв скрипт и го споделям тук (public domain, правете каквото искате с него), като в него има основната функционалност, която в повече случаи трябва. Всички png файлове в текущата директория ги събира в един файл, създава css класовете и html файл с демонстрация как се използват. Ето изходния код на css sprites генератора, генерирана примерна страница и всички файлове използвани в проекта.
Приятно ползване.
[ Коментари: 1 ]Коментари
Disclaimer: Except where otherwise noted all opinions expressed here are personal
opinions of the author and do not reflect official opinions of my employer or
any other person, company or organization associated with the author.
Copyright: Except where otherwise noted the content of this site is licensed under a
Creative Commons Attribution License. Текстът на договора за ползване на български
Copyright (cc) 2003-2011 Georgi Chorbadzhiyski. Some rights reserved.
Comments, texts and pictures not signed by me are property of their respective owners.
Страницата е генерирана от Glog v3.99-test
Отдавна ползвам тази техника с преместването на изображението. Спестява премигването на over положението докато кешира картинките. Само където не използвам готови тулове, а си ги правя сам на фотошоп и си ги редя сам на css. Не си спомням къде го видях този метод за първи път, може би на сайта на apple, но от тогава все него си ползвам, когато имам бутони с променящи се картинки за over положения.
И като заговорих за apple сайта и понеже обичам да пипкам с FireBug-a по това, което гледам, много се кефя как са си направили главното меню, супер яко е!
Виж и това: http://www.apple.com/mac/ - хоризонталния скрол с продуктите. По същия метод е.
Написа Илиян Бетовски (www) на 10-Feb-2009 07:29