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.

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 :)

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.

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.

Answer 4

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