Disabling JavaScript in Chrome doesn't trigger <noscript>

[DivineDominion]

If you know how to test for the <noscript> path, please add a note to the Readme. Disabling JS in Chrome does prevent script execution. Meanwhile, the <noscript> tag is ignored, it seems.

What's your setup to test this?

[andrewicarlson]

It could be a couple things, I know Chrome has a history of ignoring (or forgetting) how <noscript> works by either totally ignoring what's inside or just dumping it as raw text.

Another issue could be your Doctype, to my knowledge <noscript> isn't supported in XHTML at all.

Have you tried testing it in FireFox?

[DivineDominion]

In Firefox it indeed works like a charm.

For the sake of my current project, I hope no one is running Chrome and has JS disabled at the same time. Weird.

[kvendrik]

Hi @DivineDominion and @aicarlson,

Browsers pre-load images before any HTML, CSS or JS is applied. This makes it basically the same if you put an image in the src tag or put a separate img tag between HTML noscript tags.

This because as long as there is a src attribute the browser will pre-load the image anyway no matter what HTML around it says.

Browsers are too quick for us! In order to provide the fastest loading time possible, browsers preload all of the images that they can identify -- Choosing A Responsive Image Solution, Smashing Magazine

So in short: If you would like to create a fallback for non JS users (even though they will load two images). Then you could do something like:

<img src='demo/images/small.jpg' alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg,
                                                          <768:small.jpg,
                                                          <960:medium.jpg,
                                                          >960:big.jpg' />

Instead of:

<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg,
                                                          <768:small.jpg,
                                                          <960:medium.jpg,
                                                          >960:big.jpg' />

<noscript><img src='demo/images/small.jpg' alt='kitten!' /></noscript>

You can read more about this in the "Truly Responsive Images with responsive-images.js" article under the heading "No src attribute?".

Let me know what you think. :)

[andrewicarlson]

Yep. Makes sense.