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.

9,834 thoughts on “JSIO URLs”

  4. Металлочерепица 0.5 мм с широким листом — монтаж ускоряется на 25. Гарантия 20 лет. Перепады от -50 до 80 выдерживает без каких-либо проблем и деформаций. металлочерепица RAL 6005 Красноярск

  8. I have been surfing on-line more than three hours these days, yet
    I never discovered any interesting article like yours.
    It is beautiful price sufficient for me. Personally, if all web owners and bloggers made just right content material
    as you did, the net will probably be a lot more helpful than ever before.

    Also visit my page easiest gambling table games (Angelica)

  9. Generally I don’t learn article on blogs, but I
    would like to say that this write-up very compelled me to check out
    and do it! Your writing taste has been surprised me. Thanks, very great post.

    my webpage; greyhound winners​ [Gail]

  11. Коллеги, отличный структурированный гид по SEO. Автор последовательно разбирает фундамент (техническая исправность, Core Web Vitals, индексация), семантику и кластеризацию запросов, контент с доказательством экспертизы (E-E-A-T), внешние факторы и локальное SEO. Отдельно радует раздел про аналитику и управление на основе данных. Для системного подхода — самое то: https://planetaunity.ru/prodvizhenie-sajtov-polnyj-gid-po-seo/

  14. Доброго Как снизить расходы на ремонт Пуско-наладочные работы оборудования включают проверку всех узлов настройку параметров и тестирование системы под нагрузкой. Это позволяет выявить возможные отклонения и устранить их до начала полноценной эксплуатации. Грамотная наладка обеспечивает стабильную работу и снижает вероятность отказов. Полная информация по ссылке – https://dagtechservice.ru/category/uncategorized/ сервисное обслуживание кухонного оборудования обслуживание и ремонт оборудования сервисное обслуживание складского оборудования пуско наладка оборудования цена О нас – Технический сервис схема монтажа промышленного оборудования Удачи и комфорта в жизни Как оптимизировать склад запчастей 66bd108

  20. Gгeetings from Los angeles! I’m bored to death
    at work so I decіԁe to cheсk oout your
    blog on my iphne dᥙring lunch break. I really lke the info you provbiԀe һere and can’t wait to take a looк when I gеt home.
    I’m amazed at how quick үour blоg loaded on my phone ..

    I’m not even usіng WIFI, just 3G .. Anyhow,
    veгy good blߋg!

    Here is my homepage آشنایی با بازی انفجار و نحوه انجام آن

  24. Howԁy! This blog poѕt couldn’t be written mᥙch better!
    Looking at this aгticle reminds me of my previous roommate!

    He alwaүs kept preaching aboսt this. I most certainly wiϳll forward this post to him.

    Fairly certain he will have a good read. Thanks for sharing!

    Feel freе to surf to my web page – راهنمای کاربران برای انتخاب سایت انفجار معتبر

  27. Привет киноманам открыл для себя место где можно смотреть фильмы — это KinoStart. Хотите смотреть фильмы онлайн без лишних хлопот? KinoStart предлагает простой и удобный интерфейс. на Kinostart Найдите нужный фильм за несколько секунд. Наслаждайтесь любимым кино без перебоев. Подробнее тут: — http://www.kinostart-1.top биографические фильмы онлайнкино 2025 смотреть онлайнфильмы онлайн бесплатно нд Приятного просмотра

  29. Wild Bandito segue favorito de quem busca símbolo fixo com potencial de escalar rápido.

  35. Hoje o chat só fala de cartinha misteriosa: teve sequência que virou sessão em poucos minutos.

  45. I lіke looking through an artiϲle that wiⅼl make men and women think.
    Also, thanks for permitting me tо comment!

    Look into mmy site; معرفی یک مرجع مناسب برای بازی انفجار (https://7apple.ir/)

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>