Question

我想知道聚合物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;
},

是否有内置于铁图像功能的东西，我没有利用来处理这种情况？

Answer 1

您可以使用placeholder属性：

/**
 * 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>

Answer 2

你可以通过添加铁-ajax轻松实现这一目标。使用iron-ajax处理图像请求，同时在组件中传递或明确定义占位符图像（正如我在我的示例中所示）。成功后，您可以将新图像注入组件。

https://jsfiddle.net/devappended2/hwrg1sdu/

<dom-module id="my-component">
    <template>
    	<iron-ajax
    		auto
            url="{{url}}"
            on-response="_imageResponse"
        </iron-ajax>
        <iron-image sizing="contain" preload fade src="{{image}}"></iron-image>
    </template>
</dom-module>
<script>
Polymer({
    is: 'my-component',
    properties: {
        image: {
        	type: 		String,
        	value: 		'path/placeholder.jpg'
        }
    },
    _imageResponse: function(e, detail){
    	this.image = detail;
    }
});
</script>

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

2 个答案: