Solved

How to use <noscript> element alongside "responsive" served images loaded via Javascript

Posted on 2014-07-28
9
225 Views
Last Modified: 2014-07-28
I am using a small Javascript tool called rwd.images.js (https://github.com/stowball/rwd.images.js) to responsively load images based on CSS media queries. The markup ends up looking like this:

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_home_waterfront_1.jpg);},(min-width:769px){src:url(img/ph_home_waterfront_1.jpg);}" data-category="Waterfront 1" data-link="waterfront-1.htm" alt="Waterfront 1" />

Open in new window


Since these images are useless in a browser with no Javascript capability, I believe my next best option is to use <noscript> to allow them to fallback gracefully (yes?).

This is what I've come up with?

<img class="rwdimage" data-rwdimage="(max-width:768px){src:url(imglo/ph_home_waterfront_1.jpg);},(min-width:769px){src:url(img/ph_home_waterfront_1.jpg);}" data-category="Waterfront 1" data-link="waterfront-1.htm" alt="Waterfront 1" /><noscript><img src="imglo/ph_home_waterfront_1.jpg" alt="Waterfront 1" /></noscript>

Open in new window


I removed the data tags that would also be useless without Javascript. I haven't really tried this kind of thing before, so I'm  just looking for advice... is what I'm doing the best approach? Any suggestions on a better way to handle it?

Thanks!
0
Comment
Question by:bbdesign
  • 4
  • 3
  • 2
9 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
Comment Utility
Then you would end up with a broken image for the first one.
Though you could add a class to your responsive images, add some CSS in a noscript tag that hides the responsive images

In this day and age using a browser with js disabled pretty much excludes you from using the internet period
Tell people to enable js or use a browser with js
0
 
LVL 13

Expert Comment

by:duncanb7
Comment Utility
You can use css to do it that let you more flexibility, for example code as follows

Duncan
<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

Open in new window

0
 

Author Comment

by:bbdesign
Comment Utility
I keep hearing conflicting things from people about supporting no-JS. Maybe that time has passed and I should just ignore users with no JS, that is always an option. There are always some developers who insist on supporting every possible variation of browser, browser version, JS vs. no-JS, which CSS selectors will work, etc. But I tend to agree, you have to draw the line somewhere.

Aren't there still a lot of people browsing the web on non-smart phones? Maybe things have really changed that much in the past year or two (which would be nice).
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Aren't there still a lot of people browsing the web on non-smart phones
Maybe they are but should you spend 20% of your time on 0.5% of your visitors.
Thats why some many sites no longer support IE8 because the work to time ratio is not worth it just make the site work in IE8
And smartphones are so damn cheap these days anyway
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:bbdesign
Comment Utility
@duncanb7 - so that would be an example of the CSS workaround that Gary was suggesting, I think. To make it so broken images don't appear on the site.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
I tried to find some stats on non js browsers/js disabled, latest data is from nearly 5 years ago where it stood around 2%, I would be surprised if it is even over 0.5% at this point.
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Found something from the UK government
https://gds.blog.gov.uk/2013/10/21/how-many-people-are-missing-out-on-javascript-enhancement/

0.2% of people have non js browsers.
0
 
LVL 13

Expert Comment

by:duncanb7
Comment Utility
Dear Author,

I search it from google internet and just only find style change to do noscript besides old one   such as at
http://www.w3schools.com/tags/tag_noscript.asp

Is it  worth to care about who don't use javascript ? just up to you

Duncan
0
 

Author Comment

by:bbdesign
Comment Utility
Thanks for your input!
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now