Question

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

问题：项目使用图片精灵图标，并将其显示为<i class="icon-user"></i>。该应用程序部分由移动用户使用，如果他们使用边缘冲浪，他们中的一些会禁用图片。结果一些按钮消失了。

我唯一需要的是显示 某些内容 （灰色方块，圆圈......），如果图像被阻止的话。通过<html>元素上的CSS类（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像素图像。如果它返回true，则表示图像已启用。

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

检测浏览器是否禁用图片

1 个答案: