This is essentially my HTML. It is part of a responsive design so I cannot rely on fixed widths/heights:
<img ng-src="{{imageSrc}}" />
The value of $scope.imageSrc is changed inside my controller and the view is updating properly.
But: At the point of time the image has finished rendering I need to get its clientWidth and clientHeight properties.
So how can I detect programmatically that
the image has finished loading and
the view has been fully updated with the rendered image
without using weird timeouts?
Two other questions will help you here.
This SO post will detect loading via the load event.
And this post will detect rendering via requestAnimationFrame.
Related
I'm making a chat interface in ReactJS, and each item in the chat log displays the same avatar icon over and over again. Currently the problem I'm facing is that when new items are added the chat log, this image blinks in every list item, which does not look very presentable.
I want to know if there is a way to reuse the Component (most probably not) or the bitmap data, so that once loaded in memory, it can be shown more quickly without a perceivable blink. I have tried using data URL, but not to much avail.
Per request in comments further details:
I have a separate Component to show each chat log item. It contains an Image component to show the avatar.
On the top log I'm using a FlatList and in the renderItem I'm rendering the said chat log component. Whenever any message is sent or received it is appended to the array that the data in the FlatList is pointing to.
Whenever an item is added the list gets re-rendered causing the Image to be created again (I have searched but haven't found any good away of appending items to a FlatList without affecting existing children). Therefore I believe the solution lies in making the image load faster so that the re-render is not so perceivable.
One reason I think of the flickering is if you reassign the key of list items and forcing it to re-render. Check if there is any such case. Thats one of the main reasons component to re-render on listviews.
AngularJS 1.5> $doCheck after stoped rendering
I'm trying to build a D3 chart inside a AngularJS component. I wan't to update when data changes ( by one way binding ) or when the chart is made bigger via a Button.
As far as I got is using $doCheck (because $onChange is not fired when data is updated or when parent resize happens ). The problem is that $doCheck is fired before the parent is finished rendering ( Container width is the old one ).
If you have any tips it would be great.
Thanks
I am using Ionic for just a simple tab app that displays some info I load from an external source (in this case parse). It works pretty well, although sometimes I am noticing that I click a view and the view will be blank. When I tap the tab again it populates the list with the view from the server. I am assuming this is the app taking a momment to load the data.. it seems to take less than a second, but dosen't then update.
Has anyone seen this? I was thinking I could probably just build some sort of loading thing that shows? Is there an easy solution to basically refresh the view once the content has been loaded?
Use a Boolean controller variable in your controller, when everything loaded and all promises resolved set it to true
In your view wrap everything in ... Ng-if='controller.loading===true'
You could also create another div that says ... Ng-if loading===false
And inside it put a loading icon
Remember to initialise controller variable to false initially
Scenario:Update the angular kendo grid on click of various buttons.Able to update the grid with new service returned values.
Issue: Angular kendo grid flickers for a second while refreshing.
HTML Structure: Tried with & without k-ng-delay
<div id="alertGrid" kendo-grid k-options="alertGridOptions"
k-rebind="alertGridOptions" k-ng-delay="alertGridOptions.dataSource">
</div>
The function that is called on click of refresh buttons
$scope.renderAlertGrid=function(){
$scope.alertDataSource.read();
//$('#alertGrid').data('kendoGrid').refresh();
};
Tried to use only refresh, it dint worked out. No impact in using along with read() as well.
Everything is working fine,just that UI becomes little awkward during refresh due to that 1 sec flicker and refresh.
Kindly help out
Thanks
Your problem is that your data source is declared inside your options object and you're binding to your data by referencing your options object using k-options and then you are using k-rebind to watch for changes on your options object. So every time your data source changes in your options object the entire grid will re-render and all your scroll etc will reset because k-rebind re-renders every time a change in your options object is detected.
You need to remove k-rebind and bind to your data source separately using the k-data-source attribute. Then the rows in your grid will update when the data changes in your data source without re-rendering the entire grid.
k-rebind is used when the options object has to be changed and the entire widget re-rendered. For example switching a bar chart to a pie chart. That requires a full re-render. k-rebind is a bit of a hack and should be avoided imo.
Parts of a view of my Angular app are not rendered correctly - sometimes.
The behaviour is very strange, because this happens only sometimes and for certain items only.
My app consists of a service, a controller and a view. The service communicates with a backend and provides data for the controller. The controller is watching for certain data. With data-binding the values are shown in the view.
In general the shown values are correctly - I can see it in the logs. But sometimes when the a value has changed, not all depended view elements get updated - but some of them.
I mean a DIV shows the text of a certain value with ng-bind.
Moreover another DIV is visible or hidden with ng-if and depends on the same value of the same controller.
Sometimes I have the behaviour that the visibility of the button is switch correctly but the text of the other DIV does not (shows the old text).
It switches only if I scroll the view (or touch it on mobile device). Is this the next digest cycle maybe?
Otherwhile everything is rendered complete correctly!
I have already tried it with a directive and without one, with the 'controllerAs' syntax and without, with Angular 1.2 and 1.3 - but everytime the same result.
Has anyone further ideas to this behaviour?
Can this be a rendering problem?