Улучшенная загрузка маленьких изображений
От: Gangsta  
Дата: 30.08.07 07:19
Оценка: :)
Условия.
========

Существует некая ASPX-страница, на которой есть заранее неизвестное количество тэгов img, которые подгружают аватары, размером 16х16. Выглядит это примерно так:

<img src="/images/avatar.aspx?uid=31337" width="16" height="16" />


Другими словами хэндлер avatar.aspx берет аватары из базы данных для каждого конкретного uid. Или, если аватара нет, выдает в результирующий поток дефолтный аватар.

Очевидно, что способ не является эффективным, т.к. одновременно на странице может быть 100 различных аватаров и будет 100 запросов к серверу.

В качестве решения было принято решение загружать аватары через клей, и потом разруливать из с помощью css-свойства background-position. Клей должен работать примерно так:

<div style="width: 16px; height: 16px; background: transparent url('/images/avatar_clue.aspx?ids=11_12_45_64_90') no-repeat 0 0; background-position: -16px"></div>


Т.е. URL представляет некий набор склееных аватаров. Для юзеров с айдишниками 11, 12, 45, 64, 90 будет одинаковый URL /images/avatar_clue.aspx?ids=11_12_45_64_90 при загрузке которого будут те же самые аватары 16х16, но каждый из них будет снизу приклеен друг к другу. В нашем примере размер результирующего файла получится 16х80. И для каждого аватара будет меняться background-position, сначала 0, потом -16, потом -32, ну и т.д.

Надеюсь, до этого момента понятно объяснил.

Задача
======

Необходимо разработать такой механизм, который бы обеспечивал выполнение данной задачи. Как сделать сам клей — понятно, тут никаких сложностей нет. Дело в другом, как в ASPX странице в автоматическом режиме раздавать URL'ы и значение background-position?

Необходимо сделать так, чтобы аватаровы разбивались на группы (например, не более 10 аватаров в одной группе). Это нужно для того, чтобы не получился слишком длинный URL клея.

Каким наиболее простым образом получить доступ к элементу на ASPX-странице, который нуждается в аватаре? Мы ведь не можем сделать <%= getAnotherAvatar(...); =>, т.к. класс, который должен разруливать все это дело, должен сначала знать обо всех аватарах на странице, прежде чем выдавать какие-то URL'ы.

В общем, приветствуются любые предложения, что бы вы сделали для решения этой задачи?
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.