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

  2. Tava quase zerando a banca, aí o Sweet Bonanza me solta um Tela Forrada. Subiu pra R$ 5.000!

  3. Having read this I believed it was extremely informative.
    I appreciate you spending some time and energy to put
    this information together. I once again find myself spending way too much time both reading and
    commenting. But so what, it was still worth it!

  8. An outstanding share! I’ve just forwarded this
    onto a colleague who was doing a little homework on this.
    And he in fact ordered me breakfast because I found it
    for him… lol. So allow me to reword this…. Thank YOU for
    the meal!! But yeah, thanx for spending the time to discuss this topic here on your web site.

  10. Today, while I was at work, my cousin stole my iphone and tested to see
    if it can survive a twenty five foot drop, just so she can be a youtube
    sensation. My apple ipad is now broken and she has 83 views.
    I know this is completely off topic but I had to share it with
    someone!

  13. Konu sade ama etkili şekilde anlatılmış. Bugün birçok kişi bir hizmet almadan önce internette araştırma
    yapıyor, yorumlara bakıyor ve farklı firmaları karşılaştırmak istiyor.

    Bu nedenle yerel rehber sistemleri hem kullanıcılar hem de işletmeler için oldukça kullanışlı hale geldi.

    Jet Rehber bu açıdan dikkat çekici bir platform olabilir.
    Çünkü sadece işletme bilgisi sunmakla kalmayıp, kullanıcıların hizmet almak istediği
    firmalara daha kolay ulaşmasını sağlayan bir
    yapı sunuyor. Özellikle randevu ve iletişim kolaylığı
    gibi özellikler, klasik firma rehberlerinden daha işlevsel bir
    sistem oluşturabilir.

    Hizmet sektöründe güven çok önemli. Kullanıcılar temizlik, oto
    bakım, güzellik, emlak, danışmanlık veya benzeri bir alanda firma ararken karşılarında düzenli, ulaşılabilir ve açıklayıcı bilgiler görmek istiyor.

    Jet Rehber gibi platformlar da bu ihtiyacı karşılayarak işletmeler ile kullanıcılar arasında daha pratik bir bağlantı kurulmasına yardımcı olabilir.

    İşletmeler açısından da bu tarz platformlarda yer almak önemli bir avantaj sağlayabilir.
    Çünkü birçok küçük işletme kaliteli hizmet verse bile
    dijital ortamda yeterince görünür olmadığı için potansiyel müşterilere ulaşmakta zorlanıyor.
    Bir işletmenin rehberde listelenmesi, teklif alabilmesi ve
    kullanıcılar tarafından kolayca bulunabilmesi, yeni
    müşteri kazanımı açısından faydalı olabilir.

    Bu yüzden Jet Rehber gibi işletme rehberi ve teklif alma odaklı platformların gelecekte daha fazla kullanılacağını düşünüyorum.
    Kullanıcı için kolaylık, işletme için görünürlük sağlayan sistemler dijital
    pazarlamada giderek daha değerli hale geliyor. Bu tarz içeriklerin devamı faydalı olacaktır.

  18. Dobrei minha banca no Fortune Mouse no fim de semana. Nunca corra atrás de red. Saque solicitado!

  28. QS88 là nền tảng giải trí trực tuyến được đông đảo người chơi tại Việt Nam tin chọn nhờ
    giao diện hiện đại, tốc độ xử lý nhanh và hệ sinh thái đa dạng
    từ thể thao, casino live đến slot đổi thưởng.
    Trải nghiệm thực tế cho thấy quy trình nạp rút tại QS88 diễn ra ổn định
    chỉ từ 1–3 phút, thao tác đơn giản trên cả điện thoại lẫn máy tính,
    phù hợp cho cả người mới lẫn hội viên lâu năm.

    Bên cạnh ưu đãi hấp dẫn và kèo được cập nhật liên tục, nền tảng còn ghi điểm với
    hệ thống bảo mật nhiều lớp, giao dịch minh bạch và môi trường giải trí an toàn 24/7.

  31. Получите бесплатную консультацию юриста-нотариуса по вопросам наследства, недвижимости, оформления сделок, доверенностей, раздела имущества и другим правовым вопросам. Переходите по запросу консультация у нотариуса. Специалист поможет разобраться в вашей ситуации, оценит возможные риски и предложит оптимальное решение. Консультация доступна онлайн и по телефону. Обращайтесь за профессиональной помощью и получайте ответы на важные юридические вопросы без лишних затрат.

  32. Wow, superb blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is wonderful, as well as the content!

  38. I’m impressed, I must say. Seldom do I come across
    a blog that’s both educative and engaging, and without a doubt, you have hit the nail
    on the head. The problem is something that not enough folks are speaking intelligently
    about. Now i’m very happy I stumbled across this during my search for something relating to this.

  39. Консультация юриста в МФЦ — удобный способ получить правовую помощь по жилищным, семейным, наследственным, земельным и другим вопросам. Переходите по запросу сколько стоит консультация юриста в МФЦ. Специалист поможет разобраться в ситуации, оценить перспективы дела, подготовить документы и подскажет дальнейшие действия. Запишитесь на консультацию и получите квалифицированную юридическую поддержку в удобном формате.

  40. 可以把它比作餐厅指南上的地址列表，而不是美食评论。指南告诉你每家店在哪，但好不好吃、干不干净、会不会吃坏肚子，它不保证。Cryptify Hub同理：提供链接，不提供背书。参考地址可以，决定去哪里吃，请自己看评价。

  44. Mahjong Ways 2 tá distribuindo Multiplicador de 50x nesse exato momento. Peguei 10k e já parei de jogar. O coração quase parou.

  48. Новостройки от застройщика в НСО – это широкий выбор современных квартир и домов на любой вкус и бюджет. Первый Строительный предлагает разнообразные проекты, от студий до многокомнатных квартир, с продуманными планировками и высоким качеством строительства. Мы поможем вам найти идеальное жилье, которое будет соответствовать всем вашим требованиям.
    Подробнее – https://1-stroitelny.ru
    застройщик
    строительная компания домов
    строительство

  49. Hi there! This is kind of off topic but I need some help from an established blog.
    Is it hard to set up your own blog? I’m not
    very techincal but I can figure things out pretty
    fast. I’m thinking about creating my own but I’m not
    sure where to begin. Do you have any tips or suggestions?

    Cheers

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>