Solved

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

Posted on 2014-07-28
9
229 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
ID: 40224555
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
ID: 40224585
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
ID: 40224590
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
Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

 
LVL 58

Expert Comment

by:Gary
ID: 40224596
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
 

Author Comment

by:bbdesign
ID: 40224600
@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
ID: 40224623
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
ID: 40224659
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
ID: 40224664
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
ID: 40224823
Thanks for your input!
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Javascript to set controls visibility 5 35
CSS: Making responsive table look nicer 7 26
Index on a Table 6 14
Jquery 2 12
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.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

777 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