Is content loaded/styled/parsed in the <noscript> tag even when JavaScript is enabled?

Question

For my site, I'm displaying a <div> within a <noscript> tag.

In the DIV, I have an image.

Quick Example:

    <noscript>
         <img src="logo-sm.png" alt="Site Logo"/>
    </noscript>

If JavaScript is enabled, is that image still loaded, and are CSS styles applied to it? What about DOM event listeners? I'm wondering if a lot of external content (whether it be images, videos, audios, etc.) will affect page load for people who actually allow JavaScript beforehand.

EDIT:

By the way, I don't have this site public on the web. I'm using XAMPP to view it in Chrome Canary.

Plagiary

Have you tried turning off JavaScript in your browser and then watching your server logs? – Beauregard

No, I have not. How do I do that? Er, the server logs I mean. How do I view them? – Plagiary

How you turn off JavaScript depends on your browser, should be somewhere in the settings. Then you'll need to find your server's access logs and see if loading the page without JavaScript talks to the server; alternatively, you could watch the network activity in your browser's developer tools. Clearing your cache might be a good idea too (just in case). The spec doesn't seem to specify if the contents will be loaded or not, however, the "by affecting how the document is parsed" and basic sanity suggests the the <img> won't be loaded. – Beauregard

step 1: turn off javascript in your browser; step 2: open your browser's developer tools network tab; step 3: visit the test page; step 4: check if the test resouce is among the resources being loaded. – Heartland

Very nice! I didn't even think about the resource tab! Apparently, no, it is not loaded. Also when I inspect the <noscript> element, Chrome appears to make it plain text, by quoting it. – Plagiary

@Ricky So, I guess that answers your question then. You could answer your own question and accept it. – Takashi

I was getting to that. lol – Plagiary

This was good information as I am providing fall backs for users without JS. I load some images after the DOM is ready via JS for various reasons, but I do want some image to show up if JS is disabled. I don't want to risk loading twice or load more than necessary for mobile. Glad to know the resources don't get loaded if JS is enabled. – Pisano

Answer 1

If JavaScript is enabled, is that image still loaded, and are CSS styles applied to it?

Depends on browser implementations. Most of the modern browsers support the use of <noscript> tag but in some cases the <noscript> might even work incase a <script> fails to execute.

However if the <noscript> is executed (i know) then the css styles will apply to the elements on the page since they are added to the DOM

What about DOM event listeners?

If scripting is enables on the browser and you serve <noscript> content then the content should conform such that it does not cause parssing errors. Look here for more

I would advide you against the use of <noscripts> because as the manual says:

The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly

Hope that helps :)

Gnomic

I'm only using noscript to display a message saying that the user isn't allowing JavaScript, and saying that they should. :P – Plagiary

@RickyYoder if the user is using a script blocker, the <noscript> content won't be displayed. – Heartland

Haha what? It's a script blocker though! Why is it blocking an HTML element that denies scripting? Also, even if these blockers are being used, I doubt that a significant amount of users are using them, right? – Plagiary

@Gnomic Chrome still quotes the innerHTML as plain text, so perhaps it's just a Chrome thing? – Plagiary

@RickyYoder you mean in the <noscript> ? If so then yes because it has something to do with context too. My guess would be other browsers too should be the same. Try it in others . I think you will get only plain text. – Gnomic

Opera is doing the same thing. It seems like it's just plain text if JS is enabled. – Plagiary

All of them will unless(you get some weird browser) .. they will just show plain text. Feel free to accept the answer if it helped you. Cheers :) – Gnomic

Answer 2

Answers:

1. The image does not appear as a resource in the console, therefore it is not loaded.
2. Chrome quotes the innerHTML of the noscript tag, making it plain text.

Plagiary

Answer 3

If Javascript is enabled, there is no reason why the code should be working. noscript tags are meant for browsers / users without JS enabled. If the javascript is disabled the image will be appear otherwise it just take time to be loaded but just wont display.

Merissa

I suppose, but then again there's no way of checking for this. I tried to set the CSS display property of the <noscript> tag to "block" in the console, but of course, it still won't show. – Plagiary

I would suggest JS if statement, but there is no sense.. if the JS disabled it just fail. – Merissa

@RickyYoder check the answer below it might help explain more. – Gnomic

@Gnomic Great answer! Unfortunately I don't know the subject so well to answer that one in safety :) anyway well done. – Merissa

Thanks @Merissa . We are all learning :). Hope it helps others too . – Gnomic

Answer 4

The content inside the <noscript> element will be displayed if scripts are not supported, or are disabled in the user’s browser.

Lowly

This doesn't answer the question. -1 – Takashi