로드 된 페이지의 이미지가 빨리 사라지는 이유는 무엇입니까?

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}} 

후 두번째 이미지를 표시 준비 화상을 소거하는 화상을 표시하는 커서를 통해 처음 반복 때문에 깜박 할 화상이 이유처럼 보인다

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 파일을 떠나, 나는에서 템플릿을 변경 : -)