Here is the link of the website https://ecom-website-f483.vercel.app/ after website homepage is completely loaded and then if you scroll little faster you will start seeing blank screen and after few milliseconds component appears again.
I'm under the development progress of nextjs based application and found some fuzzy stuff that's giving bad experience..
I'm just here to ask you whether it's possible to cache pages on nextjs development mode.
Now the problem is that I'm getting white blank screen for some seconds everytime I reload any pages. Changing route works properly and doesn't come with blank white screen.
Only when I reload the page by pressing F5 or clicking reload button, it shows me blank white screen on all kinds of web browsers. I know I can set the background color of index.html which will overlays during page loading but I don't think it can be the final solution to fix blank white screen.
Are there any way to solve the issue ?
i am facing a issue.
I have created a images gallery in which the 18 images are showing by default and if user scroll down to the end of page then more images are adding to the gallery through ajax.
Now suppose when user have 18 images and he opens a lightbox then the opend lightbox has 18 images that he can navigate back and forth.
Now if user scroll the page to end the new images are added to the page and i want to add those images to theopened lightbox.
Please suggest a way to acheive this.
Thanks in advance.
Background
When the user clicks an image, the Lightbox script's start() method is called. This will compile the list of images to show, either a single one, or a set if data-lightbox is specified, by going through the page. These are stored in a an array called album on the lightbox object.
If you dynamically load images, then the user click an image to open Lightbox, things should work as expected, as the compilation of images happens on open.
Solution
In your scenario, the Lightbox is already open, and I'm assuming you have a set of images being browsed. You want to let the user continue scrolling while the Lightbox is open and this scrolling will dynamically load more images onto the page that are part of this set.
There is no documented way of doing this. But, you can fix your issue by digging into the internals pretty easily. This is normally not recommended, but no major changes to the Lightbox2 API are expected, so this should be safe (no guarantees though).
On scroll, once new images are loaded, add them to the Lightbox object's album property manually. Then call updateDetails() to refresh the UI.
lightbox.album.push({
link: 'fruit-roll-ups.jpg'
});
lightbox.updateDetails();
I have a page with a number of lazy loaded images and I'm trying to scroll to anchors on the same page but problem is the images are responsive and the height can vary so scroll takes me to the wrong place in the place in this page. My best guess it's because when the scrolling is executed the images are not yet rendered and so the scroll function does not know the height of the images.
Is there some workaround?
The app i have built contains header, content body and a footer. And it is locked in landscape orientation and the method is stated in componentDidMount(). However on the first launch on my own physical device, the layout is appearing to be incorrect and missing elements such as the whole footer and the buttons. The sizes of components is not rendering correctly either. I need to Hot reload once to get the correct layout every time. Further reloading will not affect the correctly rendered layout.
May i know what is the cause of the problem?