javascript - 跳过缺少的元素

Question

我用来显示图像，通过迭代，说通过 i。但是对于某些条目，图像实际上可能丢失了。有没有办法避免显示断开的链接图标？（即如果找不到图像，则跳过该元素）

score 1 · Accepted Answer

当然......你可以做几件事：

保持损坏的图像大小
如果您知道假定图像的大小，您可以使用 css 强制它。

.img-broken {
   width: 250px;
   height: 250px;
   display: block;
}

进行图像替换
您想用更好的东西替换占位符。

<img src="..." onerror="this.src='/img/broken_img_error.jpg';">

完全擦除图像
请参阅@Slave 答案。

score 1 · Accepted Answer

试试这个：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script>
    function removeElement(elem) {
        var div = document.getElementById("mainDiv");
        div.removeChild(elem);
    }
</script>
    <title></title>
</head>
<body>
    <div id="mainDiv">
        <img  onerror='removeElement(this);' src="icon.png" />
    </div>
</body>
</html>

score 1 · Accepted Answer

我不认为 javascript 是这里最好的方法。

如果您无法修复或依赖始终实际存在的图像（我知道它确实发生了），防止损坏图像的最简单方法是.htaccess在图像文件夹中放置一个文件（或等效文件，取决于您的托管环境）。

这种方法的好处是不用担心浏览器支持。这发生在服务器上，因此用户可能正在使用一些禁用 javascript 的古老专有 AOL 4.0 浏览器，这仍然可以工作；您根本不必处理用户代理差异或禁用 javascript。

我将这个用于我的用户图像。图像路径在数据库中，有时由于各种原因，数据库中指定的图像实际上不在文件夹中。这是.htaccess位于的文件的内容images/users/

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ images/users/default.png [R=301,L]

这样做是静默地将任何对不存在文件的请求转发到 file default.png，这是我的“无可用照片”图像。现在，如果请求images/users/this-does-not-exist.png进入，文件default.png将被提供。没有损坏的图像！

文档

.htaccess对于 Apache - http://httpd.apache.org/docs/2.2/howto/htaccess.html
MSDN 上的 ASP.NET 中的 URL 重写- http://msdn.microsoft.com/en-us/library/ms972974.aspx
Helicon Ape - IIS 的 shim .htaccess 支持 - http://www.helicontech.com/ape/

score 1 · Accepted Answer

我假设你有一些这样的代码：

var imgs = document.getElementsByTagName('img');

用一些图像填充变量。您可以设置onerror图像标签的方法（如其他答案中所述）来处理您想要的丢失图像。

这将删除<img>其图像不加载的标签：

for (var i in imgs)
{
    imgs[i].onerror = function() {
        this.style.display = 'none';
    }
}

如果你想加载missing_image.jpg而不是让标签消失（小心这个，因为浏览器可能不会检测到你可以进入的无限循环如果missing_image.jpg不存在......）：

for (var i in imgs)
{
    imgs[i].onerror = function() {
        this.src = 'missing_image.jpg`;
    }
}

资料来源：

Javascript 图像对象：http ://www.w3schools.com/jsref/dom_obj_image.asp
html标签：http ://www.w3schools.com/tags/tag_img.asp

score -1 · Accepted Answer

除了对图像位置进行 AJAX 调用以验证您获得 200 结果然后相应地显示/隐藏之外，我想不出一个好方法。

为什么不直接修复损坏的图片链接？

javascript - 跳过缺少的元素

5 回答 5

Related

Reference