[update] lazy loading用のplaceholder imgを追加

Author: ne-peer

src/app/components/manage/dere-list/dere-list.component.css

@@ -23,11 +23,14 @@ mat-card {
     padding-bottom: 40px;
 }
 
-img {
-    opacity: 0;
-    transition: opacity 500ms;
-}
-
 img.ng-lazyloaded {
-    opacity: 1;
+    animation: fadein .5s;
+}
+@keyframes fadein {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }

src/app/components/manage/dere-list/dere-list.component.html

@@ -9,7 +9,7 @@
     <mat-grid-list cols="1" rowHeight="1:1">
       <mat-grid-tile class="pointer">
         <mat-card>
-          <img mat-card-image lazyLoad="http://125.6.169.35/idolmaster/image_sp/card/l/{{overview.latest_hash}}.jpg">
+          <img mat-card-image lazyLoad="http://125.6.169.35/idolmaster/image_sp/card/l/{{overview.latest_hash}}.jpg" defaultImage="assets/cg-gray-600.jpg">
         </mat-card>
         <mat-grid-tile-footer style="margin-bottom:48px;">
           <div class="name">{{overview.name}}</div>