I have put ng-cloak on the body tag. I am loading a large JSON document from the server, and setting it to a variable in scope. The JSON document has image URLs which are used to loading some images.
However, I feel that the page does not become visible until the images are loaded instead of becoming visible after the JSON document is loaded. Is that how it works? Also, should I use lazy-loading to fix this? Could someone suggest something good for this?
Related
The issue we are facing has to do with the meta tags being populated on individual pages. This is a common problem with single-page sites, but is exacerbated in our case due to the face that we do server side rendering of a chunk of our site for the initial load, and the rest is done asynchronously on the front end. Because of this, Facebook is interpreting the og tags from the initial load as the end-all tags and isn't waiting for further components to mount, which would change the meta tags with the use of Helmet.
If a page is loaded up in a browser and then inspected, the correct tags are being shown, but when scanned with Facebook, it's only getting the initial load set of tags.
Any suggestions for how to address this issue would be appreciated.
Thank you.
I want to know is there a way to load my JSON file before the page is loaded to avoid asynchronous loading.
On angular state resolve, before your state is loaded, you can load translation.
I have a page that shows a list of asynchronously fetched users using ng-repeat | orderby:'value' .
The problem is that the first time the page is displayed, I see the elements appearing and getting sorted.
How can I force Ionic to load my view before I navigate to it?
One option is to use a "resolve" on the route.
This can be done both with ui-router resolve or with ng-router.
The disadvantage of using a "resolve" is that your page won't load until the data is available, however in your situation seems like that data is necessary before getting to the page.
Background:
I'm trying to preload some images in an AngularJS app before presenting them to the user to prevent them from "peeling" in. I my preload facility to return a promise resolved when the image has been downloaded.
Current approach:
At the moment I'm using a simple $http call to download the image. Imagine element is an <img> tag with my image in it:
$http.get("my/image/url.jpg")
.then( function() {
$animate.enter(element);
});
This seems to work okay, but I would appreciate any pointers if there's a better way to do it.
Problem
I'm hitting issues with CORS I think. One application of this preloader is to load profile pictures from twitter. When I do this, my $http.get throws an error in the console:
XMLHttpRequest cannot load https://path/to/img.jpg.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://my.server.com' is therefore not allowed access.
Is there a way to preload this sort of image?
I've created a very simple plunkr demonstrating the problem - you'll need the console open to see the error.
Use one of the standard ways to preload images - img tag that's not shown on screen would still force image loads.
Combined with Angular, sounds like a preloader directive would work perfectly.
No need to reinvent the wheel, just make the most use of Angular.
I saw in many websites like twitter.com when you navigate between views by clicking navigation bar menus, then views loaded only one time and the loading spinner appear only for the first time the view has been loaded. If you back to the view again,it loaded directly and the loading spinner does not appear again.
I wonder, how can i do something like that using AngularJS ?. I need any tutorials to help me doing this or put me on the road.
This is already a core part of angular. Have a read of the $templateCache documentation. Here is a simple excerpt:
The first time a template is used, it is loaded in the template cache for quick retrieval. You can load templates directly into the cache in a script tag, or by consuming the $templateCache service directly.
So when using something like ng-include to grab a remote template via a file, it will only be loaded once, and automatically placed into this cache and reused when necessary.
If instead you are wondering how you go about only reloading part of the page, then you need to look at ng-view (which is part of the basic route module), or ui-router for more complex hierarchical view layouts.