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,550 thoughts on “JSIO URLs”

  10. Дома из клееного бруса прекрасно вписываются в ландшафт Карельского перешейка и Ленинградской области. дом из клееного бруса Деревянный дом среди сосен и озёр смотрится естественно и гармонично. купить дом из клееного бруса Именно для таких участков брусовые дома подходят идеально.

  11. Детская площадка — это не роскошь а необходимость для полноценного развития ребёнка. детский городок купить Активные игры на свежем воздухе укрепляют иммунитет развивают мышцы и дарят положительные эмоции. официальный сайт Каждый ребёнок заслуживает своё место для игр.

  24. 1C-Bitrix: Управление сайтом — редакция Стандарт — это мощная платформа для создания и управления корпоративными сайтами. Переходите по запросу Битрикс управление сайтом Стандарт цена. Подходит для компаний, которым нужен функциональный сайт с каталогом, формами, SEO-инструментами и удобной системой администрирования. Решение обеспечивает высокую безопасность, производительность и гибкость масштабирования бизнеса в интернете.

  25. Please let me know if youre looking for a writer for your weblog. You have some really great posts and I feel I would be a good asset. If you ever want to take some of the load off Id really like to write some content for your blog in exchange for a link back to mine. Please blast me an email if interested. Kudos buy viagra sexual porno xxx adults pills

  30. Im gone to say to my little brother that he should also pay a quick visit this webpage on regular basis to get updated from latest reports. buy viagra sexual porno xxx adults pills

  32. You are so interesting! I don’t think I’ve truly read something like that before.
    So good to find another person with some original
    thoughts on this subject matter. Really.. thank you for starting this up.
    This site is something that is required on the web,
    someone with a little originality!

    Here is my blog post – deposit europcar
    (Deanne)

  35. Доброго Сайт визитка в Махачкале может быть мощным инструментом если подан правильно. Если текст ограничен словами «контакты и форма» доверия нет. Но если раскрыть: адаптивный дизайн SEO оптимизация форма заявки карта аналитика и поддержка внимание удерживается. Такой сайт превращается в инструмент продаж. Полная информация по ссылке – https://www.ts-web.ru/blog/marketing/yandex-direct-setup.html сайт для агентства недвижимости под ключ интернет-магазин под ключ Россия реклама во ВКонтакте под ключ сопровождение сайтов в Махачкале TS-Photo — сайт фотографа Кейсы TS-Web SEO продвижение сайтов для юристов Удачи и комфорта в жизни Поддержка интернет-магазина WordPress — гарантия продаж 84_ac8d

  37. WOW just what I was searching for. Came here by searching for keyword buy viagra sexual porno xxx adults pills

  39. вавада вход в личный кабинет вавада вход в личный кабинет .

  41. Wow superb weblog structure How long have you been blogging for? you make running a blog look easy. The full glance of your site is great let alone the content material buy viagra sexual porno xxx adults pills

  47. I think what you said was actually very logical. However what about this? suppose you were to create a killer post title? I mean I dont wish to tell you how to run your blog but what if you added a title that makes people want more? I mean BLOG_TITLE is a little vanilla. You should glance at Yahoos home page and note how they create news titles to get people interested. You might add a related video or a pic or two to get readers interested about what youve got to say. Just my opinion it could bring your posts a little livelier. buy viagra sexual porno xxx adults pills

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>