Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2014-07-28
9
230 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

856 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