javascript - Polymer 1.0+ iron-image - 等待图像文件存在以避免 404 错误的最佳实践

Question

我想知道 Polymer 1.0+ 中的最佳实践是什么，使用iron-image 加载由另一个后端异步进程生成的文件。我希望 iron-image 等待后端进程完成创建图像文件，并显示占位符图像直到可以加载。目前，当后端进程仍在生成图像时，我间歇性地收到 404 错误。

过去，我会在计时器间隔内执行类似下面的 js 函数...但我相信一定有一种更好的方法，并且没有被弃用(主线程上的同步 XMLHttpRequest 是已弃用，因为它对最终用户的体验有不利影响)。

imageExists: function(image_url) {
     var http = new XMLHttpRequest();

     http.open('HEAD', image_url, false);
     http.send();

     return http.status != 404;
},

是否有一些内置的iron-image功能我没有利用来处理这种情况？

Answer 1

您可以使用占位符属性:

/**
 * This image will be used as a background/placeholder until the src image has
 * loaded.  Use of a data-URI for placeholder is encouraged for instant rendering.
 */
placeholder: {
  type: String,
  value: null,
  observer: '_placeholderChanged'
},

示例:

<iron-image style="width:400px; height:400px;" placeholder="./loading.png"
      sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image>