Im building an app with Aframe that requires fetching images saved onto AWS.
I was getting consistent cors rejection, and after resolving that, my images are passing cors but SOMETIMES they are not, I then utilized asset caching to render the images and the error has changed from mentioning cors to Tainted canvases
Im thinking that cors is effected by the clients internet speed or location?
Im also using aframe react and im wondering if react-rerenders on startup are causing the issue.
Make sure to have <img crossorigin="anonymous"> set, and try without the React layer (which I don't recommend using anymore for perf and scalability reasons for VR, and seeing it mishandled most of the time).
Related
I am using SvelteKit with SvelteCubed to run Three JS within a Svelte component. For the materials I am using (rather large) textures. ThreeJS's THREE.TextureLoader(); requires document to work, since it creates an image and sets src.
However, this means that to use it, I need to put it in onMount(), which seems to stop the images being cached and removes the snappiness of SvelteKit using clientside rendering, since they are loaded fresh every time, and often require a manual reload.
I am using Vite's import image from "path", but this doesn't load the image into a format useable by a shader, it just gives me a path to use. Is there a non-DOM based option that I can use before mounting and SvelteKit will cache?
I'm using Vue CLI PWA workbox plugin mode.
My app has more than 1000 assets, and precaching them results in very bad performance. Please, check it out:
https://nikudu.com/
Is there a way to precache files more specificly?
For example, precache files by URL.
On url x/y only precache files 1,5,6 and on url x/v precache files 7,8,2.
I have worked with PWAs and Angular, so no experience with Vue. That said, I would suggest to pre-cache only your shell app (hence the minimum static assets/js that you want to present to the user, when accessing the app offline).
For the other images you can use a lazy approach and cache the images only after they have been requested once (but I do not know if this goes against your requirements).
From this point you could even expand your logic to define, which are the most used routes and preload only those images in the background, once the user lands on the app.
If you are interested, I wrote an article about Service Workers and caching strategies independent from Angular, therefore you can use the same concepts in your app too.
Im just beginning to learn about A-Frame and Im attempting to load a local image taken with my ricoh theta into an a-frame scene. I ran into the CORS issue and attempted to use the A-Frame asset loader which adds the cors header but was told it "can't upload" the image.
Do I need to prepare the image in some way in order to have the asset loader accept the image? How do I overcome the CORS issue?
Forgive my ignorance. Im sure the answer to this question will help alot of people interested in A-frame.
The A-Frame Asset Uploader is broken because we have expired keys for UploadCare. You can host the image in other places such as GitHub Pages, or image hosting services such as imgur
TL;DR QUESTION: Are the Angular and PageSpeed compatible at all? I can't find any information anywhere on this.
I have an application that uses AngularJS to load in images from external websites. These images are often quite large (~500kb, ~1200x900px) but are served in my application at a lower resolution (~800x500px). I have no control over the image size or level of compression.
I've signed up for Google PageSpeed service and have everything up and running. However, these images are not being touched in any way. I'm wondering if this is because I'm using AngularJS to serve them up (the images are despite being in Angular, I'm serving the images with src="{{img}}" rather than ng-src).
Any ideas on what I can do to get this working? It really seems like an ideal service for me, proper compression and scaling of images would make my page loads go from ~2mb to ~100kb!
Are there any other services which do a similar thing? I need some sort of middleware to compress and scale images before serving them to my user.
EDIT: For clarity, my server is running on Heroku using NodeJS/ExpressJS/AngularJS/MongoDB. Don't know if this affects anything.
After doing a bit of research, it seems that PageSpeed works similar to the Google search, in that it indexes your page and looks for images to compress. Seeing as Angular needs to load scripts before pages are loaded, the two just won't work together.
There is a possible solution found here:
http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
For me this won't really work, as I have dynamic search pages that I can't really pre-render with PhantomJS. But for others, this might be useful.
Please alert me here if this ever changes!
I am working on a webapplication that uses caching to make it available offline. Everything works fine when running it chrome (offline and online). But when I run it on iPad the links don't work anymore and I get failed to load page everywhere. Removing the caching makes the links work again so it obviously has something to do with the caching. Navigating directly to the seperate pages of the webapp also works fine in Safari, its the link that causes the error. By default all links are loaded with AJAX in jQuery Mobile. Changing this by adding rel="external" also fixes the problem, but obviously I don't want to do that.
To enable caching I added this code: and created a manifest file with ALL the files (scripts, css, images, html). Does anyone know what the problem could be?
I've experienced this as well while working with caching using manifests. What I discovered was that there Chrome has no limits. iPad and iPhone do. This appears to be pretty small, around 5mb. Try removing images as much as possible and using YUI Compressor on your scripts.
Ajax requests can be cached actually, the system doesn't care if the request is by AJAX or normal full request. All you have to do is put the URLs you wanted to retrieve by ajax into the manifest like the rest of the assets.
Hope this helps