This page on medium https://medium.freecodecamp.org/ uses infinite scroll, but when viewing source code, the html is there so it doesn't use ajax or am I mistaken ?
Open the network panel in your inspector and watch the requests roll in as you scroll down. It's just getting jpg images so it's likely that the html is already there and the scroll action causes an ansync request for the image and javascript plugs it into the appropriate divs.
Related
I have a list of urls I need to show on a screen for a presentation. After the page have loaded, I want to scroll to the end of the page, and when it's reached load the next one.
The problem is, most of those pages have 'X-Frame-Options' to 'sameorigin', so I can't use iframes. What other options do I have ?
I thought about, maybe, a chrome extension will complete rights over navigation that would handle the whole process...
Thanks ahead.
So, the solution was indeed to build a Chrome extension. Only the software containing the page gives you that much control over it when you don't have access to its code - namely, the browser.
I built a very simple extension using chrome.tabs in the background to open a new tab or update it, injecting a script in the page whenever it's loaded, and using messaging to inform the background when scrolling is finished and it's time to load a new page in the list.
I'm using scrollreveal on my website, and it mostly works well, but
sometimes the page is flickering just before the divs reveals and
make it looks like the page is loading, before the code is executed
after loaded http://regen.no/samarbeidspartnere when reloading
the page, you clearly see the problem.
Sometimes when using the #anchor link to a div with the id, the page is also flickering.http://regen.no/start changing between
"forsiden" and "påmelding" the page are flickering before it
jumps to the target div.
Is there any way to solve this issue?
Thanks.
By using the performance tab in Chrome developer tools, I did a recording (changing between two anchor points) and I notice that when a link is hit, the page goes directly there and then the smooth scrolling effect takes place. To describe this with a small example let's say that the user is at #bottom and clicks to go to #top:
The page goes directly to #top
The smooth scrolling effect takes place, so the page goes back to #bottom
Smooth scrolling back to #top
This is why you get this flickering and flashing result.
Maybe you should use a event.preventDefault(); somewhere in your js code.
Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background
When I scroll down the mouse, more content are loaded in html page. Is there any way that I can expand the whole html page so that all content will be loaded in one go?
window.scrollTo(0,document.body.scrollHeight);
The above code helps me to get the new content of html page but also it redirect me to the bottom of page. Is there any way to stay on top of the page and using scrollto function or any other way to get the whole content in one go?
Mostly there are ajax requests being sent for the content to get loaded, so I don't think there's any way to get all content in one go.
As we scroll down & reach the bottom an ajax request is sent for more content and it repeats. Since, there's no way to combine all ajax requests in one go, unless you have write permission to the webpage, all that can be done is scrolling.
Of course, scroll back up when scrolled down, might appear like a bit of flickering in some browsers(may be not).
I am using an Android WebView to show some HTML content (a String with HTML tags to be precise) generated at runtime. The content has basically an HTML <table ...> showing various stuff and the rows of this table are generated by my program. The HTML content is loaded in my WebView by calling the loadDataWithBaseUrl() method.
Now everytime I generate a new row, I create a new <tr></tr> and modify the HTML string to add the newly created row to the table.
Obviously I have to recall the loadDataWithBaseUrl() method to reload the HTML and show the latest row.
Now there are a few problems here:
First) Every time loadDataWithBaseUrl() is called, the WebView scrolls to the top of the page
Second) I want to scroll the WebView after it is loaded all the way to the bottom of the page so that the latest generated row is always shown.
Now the actual problem:
If I try to call WebView's pageDown(true) method after the page has finished loading, I will get a nasty animation and the user has to wait for the WebView finish scrolling to the bottom of the page.
As there seems to be no way whatsoever to disable this jumping up and down behavior, I resorted to JavaScript and I am scrolling the page all the way to the bottom after the page has loaded (calling a function on window.onload)
Now I am facing another problem! Still there is a flicker caused by the WebView reloading the page which results in scrolling all the way up and the JavaScript function scrolling the page immediately to the bottom.
I have spent countless hours in the past few days and still haven't figured out a way to achieve my desired results. Is there a way to solve this issue? (Workaround/different strategy maybe?) The culprit is obviously the innate behavior of the WebView that scrolls to the top when it finishes loading the page.
Can you try something like this:
if (_webView.getScrollY() + _webView.getHeight() > _webView.getContentHeight())
_webView.scrollTo(0, _webView.getContentHeight() - _webView.getHeight());
There are some threads running on how to make scrolling and page turns e-ink friendly:
http://github.com/aarddict/android/issues/28#issuecomment-3512595
http://www.mobileread.com/forums/showthread.php?p=1929476#post1929476