A am developing a list based app, wherein I am tryin to use iScroll5 to implement lot of animations and smooth scrolling functions. I would like to do lazy loading of my contents wherein I want to load first 50 list elements to DOM and based on user scroll event asynchronously bind the next set of list elements to the DOM.
Am I on the right track to go with the iScroll5 - Infinite scrolling API or is there any other library which does the job for me ?
If you want to use infinite scrolling , means on page load some content are pre load and then user scroll down and other content are load on scroll with lazy loging, if i am understan right then please try to use jscroll jquery plugin.. it's very good for infinite scroll.
http://jscroll.com/ you can find here document and example of this plugin.
Regards,
vinit
Related
I am using the vue-masonry library. At first I have 6 items, so I crated a LoadMore Button to see more of them. The problem is, that when I am in mobile, the items load perfectly, but the viewport changes. see the image attached.
Is there something I can do, to prevent the scrolling movement?
I have a bunch of images, say 100 images, in a web page, and only 10 are visible without scrolling the page. The first 90 images have a "myclass" class.
I manage all images with jquery lazy (http://jquery.eisbehr.de/lazy/), and it works perfecty if I scroll the window.
However, If I make $(".myclass").hide() before scrolling down, I see the last 10 images, which don't have the "myclass" class, bug jquery lazy doesn't "reveal" them.
Why?
Because lazyload triggers on scroll events.
$(window).scroll() (which triggers the scroll event on the window) is enough to solve the issue.
If the scrollable div is not the window object, use it instead of $(window).
Is there any way to implement proper endless scroll for react-admin List Component? By "proper" I mean loading data only partially at start and then loading more whenever user scrolls up/down?
I am developing a windows 8 app using JavaScript & HTML.
I have a page which has different sections laid horizontally. I have links for these sections in another page. I want the page to load from that specific section (meaning page should start from this section).
I am using a grid template and have a listview in the main page. When i click on any item in a group ,navigate to that page and come back to the main page. I want the main screen to load from the section that i have selected before.The screen should automatically scroll to that section like how it is happening from semantic zoom.
Any help in this regard will be of great use.
Thanks
For the first part, it should be enough to set the scrollLeft property of the container to the offsetLeft property of the element you want to scroll to.
The second part can be achieved by storing the scrollPosition attribute of the ListView before navigating away and setting it to its old value after navigating back.
As Ma_li said, scroll-left is one solution -- especially for non ListView content. The key here is how much of the experience you want to maintain when navigating back. One option (again, for non-listview content) is to find the element you want to be onscreen, and calling scrollIntoView on the element. However, this only brings the item on screen -- it won't bring it all the way to the left (or right, for BIDI languages), it scrolls just enough to et the whole element on screen.
For ListViews, you should use the indexOfFirstVisibleItem (or, indexOfLastVisibleItem) to scroll the listview to the correct location. This is key, because the listview is a virtualized control, this provides the most accurate & reliable method for scrolling the listview position.
Thanks Dominic & ma_il
I tried document.getElementBy("Id").focus() for the 1st Question and it worked. But i am getting a problem in this.
I have four divs Horizontally say "divA divB divC divD"
Data for the divA is coming from cloud. When i click on the link for divD in the main screen. it is not taking me to the corresponding section for the first time as it takes some time to load the divA. when click on the link for divD second time, it takes to the respective section. It is working if i use setInterval() but the DivA is shown for few seconds when the page loads and then scrolls to divD which is not good.
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.