Suppose I have a python script that dumps a 1000 images on a webpage, when the user opens the webpage, the browser tries to open all of them at once, which slows down the page.
Is there any way to make sure that only those images are loaded, which lie in the current field of view of the user, to somehow load them depending upon the position of the scroll bar ?
We call this design pattern Lazy Loading. There already lots of plugins achieved it, such as loading images by scrolling. Say
Lazy Load Plugin for jQuery:
Lazy Load is a jQuery plugin written in JavaScript. It delays loading
of images in long web pages. Images outside of viewport (visible part
of web page) wont be loaded before user scrolls to them. This is
opposite of image preloading.
Using Lazy Load on long web pages containing many large images makes
the page load faster. Browser will be in ready state after loading
visible images. In some cases it can also help to reduce server load.
You can go to their web page to checkout the full example and api.
Related
i have website with 200 post and each one have +50 pictures without text content and that slow down the loading of my website .. i want to split the loading of picture using a button when the user click on it will be loaded more 10 picture and so on till the end and i don't know how to add the js function to the word-press
i found some plugin but split to many pagy with <--next page -->
but i need some thing like that to keep the user in the some page
"Lazy Loading" might be able to do what you need, although not exactly what you would like to do with a button and javascript. It is an optimization technique that only loads a picture when it's visible on the area of the browser, and delay loading the rest of the pictures until you scroll down or when they should become visible.
You can configure that when a page loads, only the pictures that are "Above the Fold" (printed on the top half of a browser without scrolling down) should load, and delay loading the rest until a user scrolls down to reveal them.
You can check this document How to Implement WordPress Lazy Load on Images and Videos.
Check out these lazy load plugins:
https://wpneon.com/best-wordpress-lazy-load-plugins/
I have seen a method on Youtube and various other sites, which, upon changing to another page on the same server make the browser not directly redirect the user to the new page, but
stays on the same page until the new one is loaded
dynamically loads the new pages content seemingly without any idle time inbetween page changes
shows a progess bar on the top of the screen
leaves any html headers or other fixed content unchanged
In this gif you can see the animation on top of the page, upon changing the page, there is a progress bar and the new page is displayed seamless.
Here is where I am a little helpless, my attempts of finding something useful in this manner brought me practically nowhere, i do not know if there is a library/framework for this use that i simply cannot find or there is some messing around with dynamical page loading i do not know about.
How is such an effect achieved and what techonolgies are requiered?
You need a single page application framework. For example look at AngularJS
If you want, you can do it with pure JS code using AJAX.
I am considering using HtmlUnit / PhantomJS tools to programmatically read the complete pinterest.com webpage (eg. http://www.pinterest.com/search/pins/?q=nivea). The images are lazily loaded into the web page as the browser window approaches the end of the page. I cannot figure out what lazy loading technique is used on that page, ie. what events do I need to fire or what functions to call by using the aforementioned tools to load the complete page (all images).
Thanks
I have a web page that contains many thumbnail images (about 100). When you click on one of the thumbnails, a modal popup is created, which is actually a new web page inside an iframe. This new web page contains 1 large image.
The problem occurs when the user opens the popup before all of the 100+ thumbnails have finished downloading on the parent page. The user must now wait a long time before they can see the large image in the popup, because the browser doesn't know to prioritise this new image above the thumbnails it is already trying to retrieve.
Any thoughts on a solution to this problem?
When you load that page, the browser queues up 100 requests for those thumbnails. There's no way I know of to remove items from the request queue. Depending on the browser, it may request up to 6 concurrently (referring to this thread), but they'll still be queued ahead of your modal dialog's large image. What you can do (from that same thread) is host the modal dialog images on a separate subdomain so the browser places them into a separate queue, as if they were on entirely different sites. That new queue would be allowed to run concurrently with your thumbnail requests.
You can use BASE64 Data URI for all the small images.
Your page can became larger but in some installs - whole page load became faster.
The other option - load the large image from other subdomain, as the "queue" is by hostname.
Interesting question. I've never come across such a situation. A workaround that comes to mind would be to load the thumbnail images only when the user is viewing them.
If you are using jQuery, you could try using this plugin:
Lazy Load Plugin for jQuery
One way to resolve this is to combine your small thumbnails into one large tiled image, reducing the number of images on the page.
I have Large.html, which is a web page that has a lot of images and javascript on it which takes a long time to load.
From other pages (a.html, b.html) how can I use JavaScript to prefetch Large.html (and all of the elements on the page) so that I can get the page cached in the users browser to help speed up page loading.
Would I need to use a hidden IFRAME?
You could just load the body of the page, put it into the innerHTML of a div that has 'display: none', and wait for a bit, then make the current div have a display of none and the div with the new page becomes visible.
It may still need to go out and actually download the images, but it should basically be preloaded.
yes, i would use a Hidden Iframe. That will, in general, take care of exercising scripts that might run and load in additional assets on that slow-to-load page.
If you do this, be sure to do it after the load of the a.html page so that you are not stopping the user interacting on this page.
I say if, because you often don't know for sure that the user will load the Large.html page.
Other than that if the large parts of the other page are mostly images, I would load them, and not the entire page (html, css, js, & images) in an iframe.
I've seen too many sites that try to load the entire content (hidden) in an iframe... and in the process make the current page unusable. :-(