Mimicking the noscript functionality: A new proposal
I wanted to float another idea which I’ve been toying with to hear what other people think and see if its a viable tool.
When we created our noscript solution we discovered that the image inside wasn’t being added to the DOM and therefore the src attribute wasn’t making a request to the server. So we were pleased we’d found a work around but it’s a pretty dirty hack and I’m not that keen on it even though it does the job.
What I’d really like is another way of adding content to the HTML which isn’t loaded into the DOM until either my CSS or JS has decided what it wants to do with it. I’m also wondering if this is a way I can get more info into the HTML page, without having to add weight to the HTTP header and if this idea could be extended beyond just responsive images, into other parts of responsive asset management and build (i.e. fonts, media, video etc. )
I was thinking of submitting a proposed spec for something like a defaults tag, or possibly a line in the meta data to tell modern browsers to omit certain DOM requests, like img src until the client has decided which src request it wants to make. That way old browsers can still load the image src as normal, we don’t have to do dirty things like hiding stuff in the noscript and modern browsers can hijack the img tag to prevent the page making the img src request until its ready.
Would love to hear other peoples opinions on this technique and if anyone has any suggestions on ways to improve on it.
So what is this about? Should that be a workaround or a real spec for responsive images?
It sounds interesting but I didn’t understood what exactly is the functionality and the point of it. Can you help me?
Or even the
deferattribute being valid on other html elements, but that would add clutter to the markup. I like the simple, tidiness of the metatag idea – especially if it could be applied to any assets.It does imply a script solution would then be required though.
Anselm, the reason the noscript technique works is that certain information passed through via HTML is not added to the DOM.
If you want to know more about the noscript you can read our blog article here:
http://www.headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag
What I’m proposing is a spec that could formalise that behaviour. I’d like to see browsers offer that in a way that we can configure and utilise.
I think this could be part of a specification for dealing with responsive images, but I think it could also be relevant to any kind of responsive asset you might want to load.
John – I hadn’t though of the defer attribute although I am attracted to the idea that its already implemented for script tags. We would still need some way of defining what was the default behaviour for browsers that don’t support a deferred image load.
I think a script solution is probably unavoidable for at least the near future. I’m not sure if I have much faith in browser vendors getting their act together any time soon to really offer us anything useful and practical. Although maybe its practical to ask for a responsive image meta data tag and then polyfill with javascript until the browsers can catch up with native behaviour?
I also like the idea of keeping responsive info in the meta data. Basically if its content, it belongs in the HTML and nowhere else, adding new tags or image formats might be trickier to deal with. Meta data is supporting info to the HTML content so why not add your configuration there.
I’m wondering if you could use a data attribute on your image tag. So if the browser can handle responsive images it hijacks the img src until its decided which one to load (as specified in your meta data). If it can’t handle it, it just loads the image as normal.
I’m coming round to the idea that new markup and new image formats aren’t the way to go.
I agree that if its content then it should only be in the html, and we have a tag for displaying images already.
Adam Bradley made a good case for this, comparing altering the width of a paragraph of text in a responsive layout to the size of an image in a responsive layout. We’re not talking about having new markup to affect text, we’re using CSS, and I think that that’s a much stronger argument. (His post is at http://www.w3.org/community/respimg/2012/04/08/using-css-to-control-image-variants/ if you’ve not seen it)
I’m really surprised that the
image-setidea hasn’t generated more interest. I think combined with your idea of a meta-tag to stop the browser pre-fetching images until it’s parsed the css for theimage-setcould work really well.