I've got a project im working on https://github.com/Bijig0/liner_rn When I click on a 'Queue' button and it navigates to a details page, I want the image to be cached from the list page to the details page.
i.e
Currently it is like this https://youtube.com/shorts/L3hTAuyqxRM
I want it to be like this https://youtube.com/shorts/DCkFUixvAoU
(Associated Snack: https://snack.expo.dev/#meg_hidey/4b5ac4?platform=ios)
I'm not sure what is causing the issue in my actual project for images to not load like they are in the snack if someone could help point me in the right direction.
You can use react-native-fast-image, it is a performant React Native component for loading images. FastImage aggressively caches all loaded images.
https://www.npmjs.com/package/react-native-fast-image
Related
I have problem with Vue spa.
App work fine, when I go from some page to another.
App is e commerce and when I copy direct link of some product and send to someone I take to much time lo load that page, but when I click from list of product to specific product it load immediately.
Only direct link took too much time to load - like 10 sec.
I try remove some load function from page, but it's the same problem.
Are you using lazy loading in your app? If not, Vue Router will try to load all pages when the site is first opened.
You can see browser's console on network section
If you see that the files of all pages are loaded when the site is first opened, you are not using lazy loading.
That's all I can think of from the information you provided, I hope it helps.
Vue Router Lazy Loading
I'm working on a project and using AOS animation but all div blocks that have an animation on them disappear whenever I refresh the page. I want to trigger a function whenever the page is refreshed so I can use the AOS.refresh(). Is there any way to do this in nuxt.js or maybe a way to go around this AOS bug?
UPDATE:
here's an example this is how the page looks before reloading:
then after reloading:
As you can see. the elements that still appear after the reloading are the ones without AOS animation.
Additionally, if you focus your eyes on the sidebar, notice I have a home page. this problem happens literally everywhere except the home page. When I go to the home page then I go back to other pages the problem basically disappears.
Not sure where is your bug coming from but so far, the homepage of the library achieves to have an animation on a page refresh. Maybe it is a lifecycle code issue at some point. Maybe post some for us to help you debug this one.
To my knowledge, there is no way of watching if your webpage is actually refreshed because there is nothing related to state before this. The only somehow useful thing that may be used sometime is this.$router.history._startLocation, which will give you the first path your webapp was loaded on.
Not sure if it may help you anyhow.
Also, you can maybe give a shot to this library in VueJS and wire it to Nuxt. Should behave pretty much the same.
In Gridsome, I am basically looking for Vue's nested route functionality (or Nuxt's child-view) to achieve something like this /:userId/profile and /:userId/posts for example. And since Gridsome uses Vue Router there should be a way to achieve this I believe
Let me try to explain what I am trying to build with Gridsome:
At mywebsite.com/ I want to show a Grid of images showing thumbnails of my video portfolio. When you then click on a thumbnail I want a modal to pop-up showing the video. The modal is semi transparent showing the portfolio in the background. So far so good.
But for people to be able to share the URL of the respective video, I need the path changing to mywebsite.com/video-1 and so on. When I then close the modal the path should be mywebsite.com/ again. This is something I already achieved within Nuxt with <child-view>.
Is there some similar functionality in Gridsome? I appreciate your help.
From the feedback you got here:
Gridsome doesn't support child routes yet. But you can kind of achieve what you want if you create a new content type called User and add each user as a node. Then generate pages for them with the Pages API. The pages you create can share a layout component.
In the same way, you can also generate pages for each video for having direct URLs to them. And use the $fetch() method to load a video in a pop-up. Or just query the videos in the front-page query instead of using $fetch().
I have been using Nuxtjs for a while in many of my projects, but I can't seem to figure how to achieve this. I want to prevent the user from viewing a content web they load my website until everything is ready, like what happens in the Google Adsense website https://ads.google.com. I want to display an animation until everything is loaded before removing the animation
I have a requirement where we need to personalize the carousel in the home page, based on the location from where the website is accessed.
For this I have created required segments and activity and brand, and targeted to the carousel component. The issue I am facing here is that the /etc/cloudsettings/default/contexthub.kernel.js is loading after all the client libs in my project is loaded, so the carousel images are getting updated but not displayed in the form of slides, but one below the other.
Is there any event which can be captured by js and then reload the owl-carousel.js?
Could someone please suggest any fix for this?