爲什麼我的加載頁面中的圖像快速出現然後消失？

當我的頁面加載時，標題中的圖像很快出現，然後在幾納秒內神奇地消失。有時，無論頁面加載是否正確，這意味着頁眉中的圖像實際上仍然可見。我不知道爲什麼這種隨機發生。爲什麼我的加載頁面中的圖像快速出現然後消失？

理想情況下，頁面與圖像一起加載並保持可見。

我有一個包含相關的幫手，事件，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();    
      }, 
    } 
});

任何幫助是極大的讚賞。

來源

2017-05-06 SirBT

是否存在'this.photo.url'？ –

我假設你嘗試改變z-index？另外，沒有看到其他類，這似乎是一個CSS問題。我會去除所有額外的東西（例如縮放，過濾，剪輯等），並嘗試將它們逐個添加回來。 – Daltron

@MaximPokrovskii是的，它存在。我可以告訴，因爲有時當頁面加載時它看起來正確顯示圖像，但大多數情況下它會出現幾秒鐘，然後消失。 :-( – SirBT

這個問題與我們之前想到的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文件，因爲它是我從改變模板： - ）

來源

2017-05-11 13:18:51 SirBT

爲什麼我的加載頁面中的圖像快速出現然後消失？

回答

相關問題