1

我正在使用 HTML5 通知为我的 Web 应用程序创建通知。

我对通知代码使用如下选项：-

var options = {
            body: text,
            icon: encodeParams("/photo?num="+snum+"&id="+cnum),
            dir : "auto",
            tag : cnum,
        };

所有文本、snum 和 cnum 都已定义。

该图标是从服务器检索的，并且工作正常。但是，如果该图标在服务器上不存在 :: 通知图标将变为空白。

如果找不到图像，我想添加一个默认图标。

有人可以在没有额外 HTTP 调用的情况下对此提供帮助吗？

4

2 回答 2

3

最简单的方法是，如果没有找到请求的，则让服务器端发送一个默认值

或者，使用 javascript 预加载所有图像，这样您就可以检测到不存在的图像，然后在显示通知时将它们替换为默认图像 - 但是，这可能会违反您的“没有额外的 http 调用”条件

于 2015-07-02T11:32:00.477 回答
0

您应该在图像元素上使用 Base64 CSS 背景图像，这样如果图像请求失败，您的默认图像将从一开始就在那里。这也将处理额外的 HTTP 请求。

例如：

img {
   background-image: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7);
   background-size: contain;
}

<img src="http://placehold.it/100x100/000000">

有关base64 图像编码及其在 CSS 中的使用的更多信息，请参阅https://css-tricks.com/data-uris/

于 2015-07-18T14:55:23.173 回答