I am very new to coding and react, for my React app I have an image carousel that was flickering when you click on the arrows (my img height is set to auto in order for it to be responsive, if I put set height the flickering stops). After some research I tried preloading the images in index.html, like this (in the header tag):
link rel="preload" as="image" href="/static/media/UntitledTEST1.016538a9.png"
I am storing images in src, 'image' folder and above link is what I'm getting in the app state.
It worked great and the images were transitioning smoothly, but it stopped working out of nowhere. The horrible flickering is back and this is the message in the console:
The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
localhost/:1 The resource http://localhost:3000/static/media/TinScreenShot1.853b581e.jpg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
I can't seem to find a solution for this, any help/input would be greatly appreciated!
Update: I realized for some bizarre reason and out of nowhere, part of the image number was chopped off in the index.html links, so the links were all wrong. The flickering is now fixed, but the resource URL error is still there.
Related
I am creating an app with a Leaflet map in Nuxt using Vue2Leaflet plugin.
I am having a problem though: I am using Bootstrap columns to size the map and accompanying image, but the image loads too slow (this cannot be resolved at this time), so the container is not the proper size when the map loads.
This causes the map to be half grey. I have attempted to call map.invalidateSize() in the mounted event, but even that must be happening before the image finishes loading.
I have setup a sandbox at: https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue
In order to see the bug, you have to view the rendered app at https://c3453.csb.app/ (the internal codesandbox render does not show the problem)
I think I need some way to wait until the image has completed loading (so the BS col is the proper size), then call map.invalidateSize(), but I am not sure how...
You can attach an onload listener on your <img>, so that you can call (again?) your Leaflet map invalidateSize() method.
I have a v-dialog that opens when page is loaded. Somehow overlay is lost. The behavior is very similar to this bug report: https://github.com/vuetifyjs/vuetify/issues/7798
But in my case overlay works when v-dialog loads after several seconds of page loading, and overlay is lost only when v-dialog is loaded from the very beginning. So I have to find the way to fix it or to force overlay to be shown together with dialog.
I tried to work with v-overlay (to wrap dialog content there), but it's content is not shown as well, if we try to do this while page is loading.
So how can I fix this or force overlay to work?
I have included the colorbox css and js and it works when I click any image. However, I don't see any button/control on the overlay. It is only the image with dark overlay behind it. What could be going wrong here?
I am doing this in k15t Scroll Viewport for Confluence.
I tried changing the default script values but even that didn't help. Am I supposed to add the controls manually? I don't think so.
I would like to see the default close button along with slideshow effect, etc. that colorbox offers.
I figured it out. Though dumb but still. The default colorbox images (button icons) folder was residing at a location different from where colorbox expected it. So now, I can see the close button at least.
What still remains is - though I have set the colorbox properties right, I still don't see the previous and next buttons on a page with multiple images. What am I missing? It should have shown up by default...
Thank you.
I implemented an A-Frame animation inside a single section on a Vue Js 2 webapp project.
I also added a smooth scrolling component for the global app. My A-Frame block is set to "embedded" to not take the the full screen size.
On Development everything looks nice. When I go live my smooth scrolling is really bad espacially on mobile device. I looked to disable A-Frame on mobile device but no info on the doc, I tried to do it with css with media queries but still the same issue.
I don't know from where it comes and which part of code I have to fix. No error on the console.
Anyone met this kind of issue please?!
Thx
I've not run into this issue before, but you could try to place the aframe scene in a separate file, then use an iframe in your main page and see if it improves.
I need to show a paginated slideshow of moderately DOM-intensive HTML pages in an iPad application.
All documents are tailored for iPad screen so there is never any scrolling inside UIWebViews.
I decided to put UIWebViews inside UIScrollView for pagination.
It works really well and smooth after all web views have rendered their content.
However, I can't afford waiting for 20, 30 or 50 web views to load before user can scroll: it takes minutes.
I tried to anticipate swipes in scrollViewDidScroll handler and pre-load a few next pages as user keep scrolling.
This worked much better (no performance difference between 10 or 150 web views).
However calling loadHTMLString in scrollViewDidScroll handler causes scrolling to lose it smoothness.
I don't care if it takes a second longer to show a particular UIWebView—all I want is for scrolling to be smooth and available as soon as possible, and to lazily preload UIWebViews on the go.
How do I achieve that?
This is a difficult problem and there is no easy/elegant way to solve it.
One way to speed up the scroll would be to lazy load the pages as you stated in your question. However, in order to ensure smoothness you would have to control when the loading happens.
So say you began by loading the first 5 pages on initial launch. When the user scrolls to page 2 and STOPS, you begin loading page 6. As soon as the user starts scrolling again you pause the loading only to resume when they have stopped on a new page. Pausing the loading in between will help smooth out the scrolling. Also, make sure you release data when possible because it can build up and hinder smooth scrolling down the line.
Another option would be to have the UIWebViews begin loading only as soon as the user stops on the page. So say I scroll to page to, once the scrolling stops I begin to load the HTML. This is not as "pretty" as the first options but it will ensure that the scrolling is smooth.
Another option, this one is a bit out there, is to run through and load all the HTML pages rich text. Leaving out all the DOM intensive stuff. Then grab a screen shot of those semi-loaded page using this method. When the user stops on the page you load it all the way including the DOM intensive stuff. This will let the user feel as thought they are scrolling quick with everything loaded.
Here is a great scrolling class that I have used before.
Here is some code to help with method 3.
Good luck and I hope that this helps!
EDIT:
Here is a great post from the guys at LinkedIn on how they solved webView scrolling problems. It would be worth a read.