ロードしたページの画像がすばやく表示されるのはなぜですか？

Question

ページが読み込まれると、ヘッダーの画像がすぐに表示され、数ナノ秒以内に魔法のように消えます。ただし、ページが正しく読み込まれることもあります。つまり、ヘッダーのイメージは実際に表示されたままです。 これがなぜランダムに起こるのか理解できません。

理想的には、画像と一緒にページが読み込まれ、目に見えることが理想的です。

何が起こっているのかを理解するのに役立つ、関連するヘルパー、イベント、CSS、およびHTMLスニペットが含まれています。

私のテンプレートの下に検索：

<template name="merchantChat"> 
{{#each chatMessages}} 
    <img class = "img-responsive img-rounded blur" src="{{this.photo.url}}" alt="thumbnail" > 
{{/each}} 
</template> 

は私のCSSの下に検索：

ルーター機能として

img.blur{ 
    position: absolute; 
    z-index: -1; 
    width:100%; 
    height:100px; 
    margin-left: auto; 
    margin-right: auto; 
    left: 0; 
    right: 0; 
    top: 0px; 
    clip: rect(5px,640px,50px,5px); 
    zoom:190%; 
    -webkit-filter: blur(1.3px); 
    filter: blur(0.9px); 
} 

と私のヘルパー：

Router.route('/merchantChat/:_id', { 
template: 'merchantChat', 
data:{ 

    chatMessages: function() 
      { 

      var selected = Router.current().params._id; 
      return buyList.find({ _id: selected}).fetch();    
      }, 
    } 
}); 

すべてのヘルプは大歓迎です。

Answer 1

以前のように問題はCSSとは関係ありませんでしたが、私がオブジェクトの画像にアクセスするために使用していたアプローチと関係がありました。

{{#each chatMessages}} 
    <img class = "img-responsive img-rounded blur" src="{{this.photo.url}}" alt="thumbnail" > 
{{/each}} 

は、第2の画像を表示する準備の画像を消去、カーソルを介して画像を表示する第一の時間を繰り返すことになるため、画像が点滅になる理由であるようにそれは、と思われます

Router.route('/merchantChat/:_id', { 
template: 'merchantChat', 
data:{ 

     chatMessages: function() 
     { 
      var selected = Router.current().params._id; 
      return buyList.find({ _id: selected}).fetch();    
     }, 
} 
}); 

とC：

は、この問題を修正するには...来ないだろう、私はどのように私は、オブジェクトの画像にアクセスした時を振り返りましたこの絞首刑：

<template name="merchantChat"> {{#each chatMessages}} 
<img class = "img-responsive img-rounded blur" src={{this.photo.url}}"alt="thumbnail" > 
{{/each}} 
</template> 

へ：

<template name="merchantChat"> 
{{#if chatMessages}} 
<img class = "img-responsive img-rounded blur" src="{{chatMessages}}" alt="thumbnail" > 
{{/if}} 
</template> 

今画像が常にページの読み込み時に表示されることがあるよう

Router.route('/merchantChat/:_id', { 
template: 'merchantChat', 
data:{ 

     chatMessages: function() 
     {  
     var selected = Router.current().params._id; 
     return buyList.find({ _id: selectedBargain }).fetch().map(function(image) { return image.photo.url(); }); 
     }, 
    } 
}); 

は、CSSファイルを残して、私はからテンプレートを変更しました： - ）