Solved

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

Posted on 2014-07-28
9
237 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
[X]
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
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

707 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