fix: Collection-repeat image recycling while loading

ionic-team/ionic-framework#1742
lanceli · Dec 1, 2014 · 4a9539a · 4a9539a
1 parent de3ab50
commit 4a9539a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 1 deletion.
diff --git a/app/index.html b/app/index.html
@@ -51,6 +51,7 @@
     <script src="js/services/settings.js"></script>
     <script src="js/services/storage.js"></script>
     <script src="js/filters/topic.js"></script>
+    <script src="js/directives/resetImg.js"></script>
     <!-- endbuild -->
   </head>
   <body ng-app="cnodejs">

diff --git a/app/js/app.js b/app/js/app.js
@@ -113,3 +113,5 @@ angular.module('cnodejs.controllers', ['cnodejs.services']);
 angular.module('cnodejs.services', ['ngResource', 'cnodejs.config']);
 
 angular.module('cnodejs.filters', ['cnodejs.services']);
+
+angular.module('cnodejs.directives', []);
diff --git a/app/js/directives/resetImg.js b/app/js/directives/resetImg.js
@@ -0,0 +1,26 @@
+angular.module('cnodejs.directives').directive(
+  // Collection-repeat image recycling while loading
+  // https://github.com/driftyco/ionic/issues/1742
+  'resetImg', function ($document) {
+    return {
+      restrict: 'A',
+      link: function($scope, $element, $attributes) {
+        var applyNewSrc = function (src) {
+          var newImg = $element.clone(true);
+
+          // add https protocol
+          if (/^\/\//gi.test(src)) {
+            src = 'https:' + src;
+          }
+
+          newImg.attr('src', src);
+          $element.replaceWith(newImg);
+          $element = newImg;
+        };
+
+        $attributes.$observe('src', applyNewSrc);
+        $attributes.$observe('ngSrc', applyNewSrc);
+      }
+    }
+  }
+);
diff --git a/app/templates/topics.html b/app/templates/topics.html
@@ -15,7 +15,7 @@
         collection-item-width="'100%'"
         collection-item-height="75"
         href="#/topic/{{topic.id}}">
-        <img ng-src="{{topic.author.avatar_url}}" ng-if="!settings.saverMode">
+        <img ng-src="{{topic.author.avatar_url}}" ng-if="!settings.saverMode" reset-img>
         <h2>{{topic.title}}</h2>
         <p class="summary">
           <span ng-if="!topic.top && !topic.good" class="tab">{{topic.tab|tabName}}</span>