JSIO URLs

Posted on by

The clever bit about JSIO is the placeholder URLs – i.e. the “jsio.gif#…” that goes in your image src attributes and background-image CSS properties. Everything after the “#” is the filename of the image that should be displayed. It doesn’t have to be the filename at all, it could just be a single letter or number or symbol or whatever. It doesn’t matter to JSIO. To JSIO, everything after the “#” is just a key into the resources object that holds data uri encoded images. As long as the key is unique (which it will be if you use filenames, since no two files in the same directory can have the same name), JSIO is happy.

Using filenames as keys into our resources object is beneficial to humans. Much more beneficial than coordinates in a sprite, simply because (hopefully) the filenames are meaningful; they describe the image. In comparison to sprites, the JSIO resources object also makes maintaining your image data much easier as it is trivial to add or remove images without having to move other images around within the sprite (and consequently all coordinates referencing your moved image).

Another benefit of using filenames as keys into the JSIO resources object is for fallback. If JSIO detects your browser is IE7 or lower, it’ll strip out “jsio.gif#” leaving just your image key as the image src, which is hopefully a valid URL to the original image. Also, if JSIO detects you’re running IE8 and the image data is larger than 32KB it’ll do the same thing*.

* …but not yet in v1.0.0 alpha

Since the image key is after the “#” (it is the URL “fragment”), your browser won’t send multiple requests for the 1*1px jsio.gif file – it’ll just send one request, cache the response, and use it again. By the way, the jsio.gif image is just a transparent 1*1px gif (for maximum efficiency), but it could be an “spinner” image or something, which is shown temporarily whilst the JSIO resources file is downloaded.

—

This post is about JSIO – JSIO is a tiny library that allows you to make fewer requests to your server by packaging all your site image data in a JavaScript file in data uri format. The official site for JSIO can be found here: jsio.freestyle-developments.co.uk. You can read more about why I started this project here.

10,787 thoughts on “JSIO URLs”

  1. Добрый день Перед выбором подрядчика на разработка сайтов полезно оценить не только портфолио но и подход к аналитике SEO прототипированию и дальнейшему росту проекта. Хороший сайт создается не ради картинки а ради заявок и доверия. Подробнее: VOLT — https://volt-site.ru/kontakty Это помогает не размывать релевантность и вести пользователя к целевому действию. услуги разработки сайтов недорого создание интернет магазина студия заказать лендинг под ключ заказать сайт по россии создание лендинга для электрики продающий лендинг для заявок Всего наилучшего и роста в топ

  6. Сертифицированные специалисты 1С:Профессионал — это гарантия качества. Не самоучки из интернета а люди с подтверждёнными знаниями. Разница ощутима в каждой задаче. маркировка товаров 1С

  7. What’s up mates, how is the whole thing, and what you
    desire to say concerning this post, in my view its truly amazing for me.

  9. What’s upp i aam kavin, itss mmy firstt occasionn too commenting anyplace, whuen i read
    thks piece off wrditing i thoubht i copuld also create comkment due too tthis goopd paragraph.
    ofvd9wuapt867wa4bfb4

  10. Attractive part of content. I just stumbled
    upon your blog and in accession capital to assert
    that I acquire in fact loved account your weblog posts. Any way I’ll be subscribing in your feeds or even I fulfillment you get right of entry
    to consistently fast.

  12. The way this post is written helps create a natural and enjoyable reading experience while keeping the topic engaging. analingus porno

  14. This post feels very easy to connect with and clearly organized which makes the entire discussion more pleasant to follow while also creating enough space for readers with different viewpoints and experiences to participate in a meaningful and positive way. 12 teen porno

  16. This post does a good job of combining clear ideas with a natural tone that makes the discussion feel more genuine overall. asshole

  17. I’m extremely impressed along with your writing abilities as smartly as
    with the layout on your blog. Is this a paid topic or did you customize it yourself?

    Either way keep up the nice quality writing, it is rare to peer a nice blog
    like this one today..

  18. Банкротство акционерного общества — сложная юридическая процедура, требующая профессионального сопровождения на каждом этапе. Переходите по запросу адвокат по банкротству АО. Мы поможем провести анализ финансового состояния, подготовить необходимые документы, защитить интересы акционеров и руководства, представить ваши интересы в арбитражном суде и минимизировать возможные риски. Обеспечим законное и эффективное сопровождение процедуры банкротства АО.

  20. По теме “Финансовая грамотность и советы для инвесторов”, есть отличная статья.

    Вот, делюсь ссылкой:

    https://360rub.ru

  21. This post creates a very active discussion because the ideas are presented in a clear and fair way making the content interesting to read while also encouraging readers to share their own perspectives and interpretations thoughtfully. dog porn

  23. The tone of this post feels calm and well-considered helping the discussion stay comfortable and easy to connect with. dogs video

  24. Привет всем Сайт под ключ нужен не для того чтобы просто разместить информацию о компании. Он должен отвечать на запрос пользователя показывать преимущества доказывать опыт и вести к заявке. Поэтому при планировании проекта стоит обратить внимание на разработка сайтов под ключ: https://volt-site.ru/uslugi/razrabotka-sajtov Это снижает риск переделок после запуска и помогает быстрее перейти к продвижению. разработка лендинга для стартапа продающий лендинг в спб заказать сайт под google разработка сайтов для стартапа услуги разработки сайтов удаленно сео оптимизация сайта недорого Всего наилучшего и роста в топ

  25. I like how this post keeps the discussion meaningful and enjoyable while still maintaining a clear and easygoing style because that combination makes the content easier to understand and more enjoyable for different readers online. dogs fuck

  26. This post is very clear and keeps the discussion interesting while also creating a relaxed and thoughtful atmosphere for readers online. dogs video

  27. Having read a few different perspectives recently I can confidently say that your organized approach to presenting this data makes it one of the most valuable and well-rounded pieces I have encountered so far. 16 teen porno

  28. It is a pleasure to encounter content that respects the readers time. Your concise yet comprehensive breakdown delivers exactly what is needed without any distracting elements. zoo porno

  29. It takes a certain level of skill to present information in a way that is both useful and completely neutral and you have certainly achieved that balance perfectly with this carefully written and carefully organized article. horse porno

  30. Почему пользователи выбирают площадку KRAKEN?

    Маркетплейс KRAKEN заслужил доверие многочисленной аудитории
    благодаря сочетанию ключевых факторов.
    Во-первых, это широкий и разнообразный ассортимент, представленный сотнями продавцов.

    Во-вторых, интуитивно понятный интерфейс KRAKEN, который
    упрощает навигацию, поиск товаров и управление заказами даже для новых пользователей.
    В-третьих, продуманная система безопасных транзакций, включающая механизмы разрешения споров (диспутов)
    и возможность использования условного депонирования, что минимизирует
    риски для обеих сторон сделки. На KRAKEN функциональность сочетается с внимательным
    отношением к безопасности клиентов, что делает процесс покупок более предсказуемым, защищенным и,
    как следствие, популярным среди пользователей,
    ценящих анонимность и надежность.

  32. Вывод из запоя на дому в Казани удобен когда близкий человек не готов ехать в клинику плохо переносит дорогу или находится в состоянии сильной слабости. Врач приезжает на дому сохраняет анонимность спокойно объясняет процесс и начинает лечение только после осмотра и согласия пациента. Вызов врача на дому особенно важен если муж отец брат мама или другой близкий уже не может перестать пить и нуждается в срочной помощи. Выяснить больше – вывод из запоя недорого казань

  33. Вывод из запоя на дому помогает быстро стабилизировать состояние пациента но врач всегда предупреждает: если есть высокий риск инфаркта инсульта делирия тяжелого отравления алкоголем потери сознания или агрессии лечение на дому может быть недостаточным. В этом случае центр организует госпитализацию транспортировку и наблюдение в стационаре. Узнать больше – вывод из запоя капельница

  34. Врач нарколог проводит первичный осмотр пациента уточняет сколько дней длится запой какие напитки употреблялись есть ли боль рвотные позывы бессонница панические атаки судороги галлюцинации повышенная тревожность или признаки белой горячки. После этого врач определяет можно ли проводить вывод запоя на дому или лучше организовать лечение в стационаре. Изучить вопрос глубже – https://vyvod-iz-zapoya-kazan21.ru

  35. The discussion here feels clearly structured and meaningful making the content enjoyable and easy for different readers to engage with. bbw

  36. I think this post works especially well because it combines a simple structure with a balanced and balanced tone which helps make the discussion feel more meaningful and comfortable for readers with different perspectives and opinions. horse porno

  37. I appreciate the way this post presents its ideas so naturally and with clarity since the discussion remains enjoyable throughout while still giving readers enough space to form and share their own perspectives respectfully. anal zoo

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>