All geek questions in one place

Mobile web: detect when images are disabled

I ran into a very nasty problem for mobile networks. On the website, I use images for most buttons, both <a href="..."><img> and <input type='image'> . Therefore, if the user disables images, the website not only does not look good, but also loses all the navigation capabilities of the site. In particular, Android does not display alt information about images, so there is nothing that could hint at images that are not displayed.

Is there a way to determine if the browser has disabled images without using JavaScript? I would like to display a more general site with optimized text if it disabled it.

+6
source share
1 answer

Without using any JavaScript at all? I am afraid that this is not possible, at least on the client side.

There are NOFRAME and NOSCRIPT tags in HTML, but there are no equivalent tags for images whose contents will only be displayed if the images were disabled or not supported.

Then for your A tags wrapping the image, perhaps you can make the A tag, and not its image, responsible for displaying a tooltip and handling events.

In addition, to ensure that your layout does not break if the images do not load, you can give tag A the normal height and width of the image. The same could be used for the <input type='image'> tags by wrapping them in a span tag and specifying the correct attribute values.

For instance:

 <a href="..." style="height: 25px"; width: 80px;" title="Some tooltip text"> <img...> </a> <span onclick="some action" style="height: 30px"; width: 70px;" title="Some other tooltip text"> <input type='image'...> </span>
+1
source

Source: https://habr.com/ru/post/895967/

More articles:


All Articles