이미지가 Meteor에서로드되는 동안 로딩 애니메이션을 표시하는 방법 0.8

Question

Meteor 앱을 버전 0.8로 업그레이드했고 사소한 UX 난이도로 부상했습니다.

나는과 같이 표시되는 변경 이미지를 가지고 :

<img src="/img/{{ image_name }}" class="pull-left"> 

(집합의 필드입니다 image_name을, 변경) 새로운 이미지를 선택할 수있는 사용자, 자동으로 이미지 변경 화면 ,해야한다.

그러나 내 테스트에서 새로운 이미지로드가 다른 동안 문제가되는 것처럼 보입니다. Meteor 0.7에서는 새로운 이미지가로드되는 동안 이미지가 공백으로 표시됩니다. Meteor 0.8에서는 새 이미지가로드 될 때까지 오래된 이미지가 화면에 그대로 유지됩니다. 이것이 보통 더 나은 결과 일 수있는 이유를 이해할 수 있지만, 제 경우에는 사용자가 왜 이미지가 변경되지 않는지 궁금해 할 것입니다. 잠재적으로 몇 초 동안입니다.

새 이미지가로드되는 동안로드 애니메이션을 표시하고 싶습니다. 새 이미지를 선택하면 애니메이션을 시작할 수 있지만 이미지로드가 완료되면 애니메이션을 제거 할 수있는 방법을 어떻게 알 수 있습니까?

아니면 무슨 일이 일어 났는지 오해 한 적이 있습니까?

감사합니다.

Answer 1

@Hubert OG의 조언에 따라 다음과 같이 해결했습니다. 내 템플릿에서

는 :

<div class="img-space"> 
    <div class="img-loading"></div> 
    {{ triggerImageLoad }} 
</div> 

img-loading 클래스는 스피너를 보여줍니다; 실제 이미지로 바꾸려면 triggerImageLoad 호출을 사용합니다. (부작용에 대한 이러한 호출을 사용하는 아이디어가 마음에 들지 않지만 더 좋은 방법이 있습니까?)

새 이미지를 선택하면 이미지가 회 전자로 다시 교체됩니다. Meteor 0.8에서는 DOM에 대한 이러한 변경 사항이 좋습니다. 그래서 자바 스크립트는 다음과 같습니다

function loadImage(cat) { 
    if (cat) { 
     var imageObj = new Image(); 
     imageObj.src = '/img/cat/'+cat.image_name; 
     imageObj.addEventListener('load', function() { 
      $('.img-space').empty(); 
      $('.img-space').append($(imageObj)); 
     }, false); 
    } 
} 

Template.myTemplate.triggerImageLoad = function() { 
    var myCat = Cats.findOne(Session.get("cat_id")); 
    loadImage(myCat); 
} 

Template.myTemplate.events(
    {'click .newImage' : function (evt, tmpl) { 
      var catId = Session.get("cat_id"); 
      var myCat = Cats.findOne(catId); 
      var new_image_name = evt.target.getAttribute('data-name'); 
      $('.img-space').empty(); 
      // don't like putting html in the js code - is there a better way? 
      $('.img-space').append('<div class="img-loading"></div>'); 
      Cats.update(catId, {$set: {image_name: new_image_name}}); 
     } 
    } 
); 

그리고 마지막으로, 24x24 픽셀 회 전자 및하여 200x200 픽셀 이미지에 대한 CSS는 : 다른 사람을 도움이

.img-loading { 
    position: absolute; 
    top:88px; 
    left:88px; 
    width: 24px; 
    height: 24px; 
    background-image: url('/img/site/img-loader.gif'); 
} 

희망.

Answer 2

어떻게 든 이미지 load 이벤트를 사용해야합니다. 가능한 해결책은 사용자에게 제시된 이미지와 숨겨진 div에서 두 번째 이미지를 갖는 것입니다. 숨겨진 소스에는 반응 소스가 있습니다. 보이는 것이 정적입니다.

사용자가 새로운 이미지를 선택하면 (jQuery를 통해) 스피너에 보이는 이미지 소스를 설정

• ,
• 업데이트 모델 반응 이미지가 로딩이 시작되도록을

숨겨진 이미지에 대한 load 콜백에서 표시되는 이미지의 소스를 실제 새 소스로 바꿉니다. 콜백 설정 방법에 대해서는 this question을 참조하십시오.