I'm running a web app with Angular.js (ver. 1.2.21) and Socket.io for a simple image-based chatting. (click an image and the image link is sent to others in the chat room). The messages are added to a $scope.messages and looped with:
<div ng-repeat="message in messages">
<p>{{message.user}}</p>
<p ng-bind-html="message.text | unsafe"></p>
<p>{{message.time}}</p>
<hr>
</div>
Where {{message.text}} is something like "<img src='/img/test.png'>"
To render the images in Angular, I added "unsafe" sanitize filter to {{message.text}} :
.filter('unsafe', function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
})
The images load very fast on all devices (android, desktop), except for devices running Safari/iOS7 (iphone, ipad).
When a new chat by the user is added to the $scope.messages feed of chats (by pushing to end of $scope.messages array), it doesn't display the sanitized <img> (it's blank) but does show the other message information {{message.user}} and {{message.time}} in the feed.
After around 10 seconds the sanitized <img> might load on the device, but not always.
If there are incoming chats from other devices, then all of the un-rendered images suddenly display properly.
