检测浏览器是否禁用图像

Question

我需要检测浏览器是否禁用了当前页面上的图像。 JavaScript (jQuery/Modernizr) 这可能吗？

问题： 该项目使用 image sprites 作为图标并显示为 <i class="icon-user"></i>。该应用程序部分由移动用户使用，其中一些用户在使用边缘浏览时会禁用图像。结果一些按钮消失了。

我唯一需要做的就是在图像被遮挡时显示东西（灰色方块、圆圈……）。通过 <html> 元素上的 CSS class 左右（例如 class="no-images"）。不幸的是，在 <i>…</i> 之间写替代文本是没有选择的。

感谢您的意见！我希望它存在一个简单的解决方案。

Answer 1

您可以使用以下脚本：

function noimage()
{
    if ((document.getElementById('flag').offsetWidth==1 
         && document.getElementById('flag').readyState=='complete')
         ||(document.getElementById('flag').offsetWidth==1
         && document.getElementById('flag').readyState==undefined))
    {
         var objHead = document.getElementsByTagName('head');
         var objCSS = objHead[0].appendChild(document.createElement('link'));
         objCSS.rel = 'stylesheet';
         objCSS.href = 'alt.css';
         objCSS.type = 'text/css';
    }
}

并且您需要以下 html 标记：

<body onload="noimage();">
<img id="flag" src="clear.gif" alt="">

只需将其添加到正文中即可。它所做的是检查 offsetWidth 属性以在浏览器顶部查找 1x1 像素图像。如果它 returns true 表示图像已启用。

如果您需要更多信息，请转至 here.

检测浏览器是否禁用图像

Detect if browser disables images

javascript

css

jquery

image

modernizr