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.
Related
Is this even possible? To have an mp3 play where it left off when you navigate to a different page on the same website? I seriously don't even know where to begin. Kind of new to HTML, CSS, etc.
Any Ideas? Thanks.
Not across multiple page loads. But you can have a single page which plays audio and provides navigation therein for the user. A couple overarching structural options would include:
Create a Single Page Application (SPA). Here your one "page" would play the audio, and the site navigation would happen within this single page instance with JavaScript/AJAX. The browser would only ever load one "page", but the overall application would dynamically load/unload as elements of that page as you see fit.
(A very old method, but still works) Create a parent page with frames for navigation. The parent (frame) page would contain the audio, and the rest of the navigation through the application would be done in frames within that page.
I'd recommend the first approach, but either would work.
If you reload the entire page (and therefore the audio source), there is no way to provide a seamless playback. There will always be a very noticeable gap due to page load times, even if you try to keep track of the position within the audio track. Slow internet connections will make it worse.
Instead, you can embrace one of those four options:
Single Page App:
As also pointed out by David, my suggestion would be to create a single page application, i.e. a page that loads once, then loads/replaces all additional content dynamically. One the user clicks a navigation link, instead of loading a new page (or reloading the current page), you just replace the main content, using AJAX. The part that provides the audio stays in place.
Additional tab/popup/window
You could create an additional tab, popup window or window just for the sake of playing the audio. One example of this is the German radio station "radioeins". At the time of writing, their website provides an orange button in the top right that will open a popup window for their live stream, allowing the user to continue browsing their website with the music continuing to play uninterruptedly from the popup. I would only go down this route if the single page app is not an option, as popups or additional tabs are bad UX and popups might be blocked by browsers.
iframe
You could provide the main content of your page within an iframe, or the other way round, provide the audio from within an iframe. I would recommend against this, as there are several disadvantages to this approach.
Frames
Frames would provide a similar approach to iframes, but they are deprecated, so I strongly recommend against this one as well.
tl;dr
Make it a single page application if you can, otherwise resort to a popup-solution.
Our web-page contains a 360 angle product viewer based on 36 product images. Only one image is showed at a time, all other are hidden. All images are served from AWS S3 bucket with no cache directive (and that is how it should be). On the first start JS plugin shows preloader for 36 images and
everything works perfect after loading.
Problem comes when the web tab (tested only in chrome) remains open for a long time (several hours) when user works in another tabs. Those hidden images are removing from the cache, and JS script reloads all of them again and 360 drug looks odd (not smooth). After browser loads all absent images it starts to work smooth again and after few hours of inactivity it repeats again.
This behaviour is what we expect, but we want somehow to check if hidden images are not cached anymore to invoke preloader.
I searched the web and stackoverflow for the answer, but all other cache related question are not answering my question, like "check if image is cached after reopening browser or cache". My question is: how to check if hidden image is still in cache?
Example code appreciated. Thanks!
PS - I know how to enable cache headers for images delivered from S3 and that is not an option.
PSS - Creating 1px image holders is not an option too.
As you mentioned in your comments - you don't want to mess with your preloader code and don't want to start your preloader each time.
The answer to your question is "no, there is no 100% crossbrowser way to tell if image is in the cache", however, you can guess it by measuring time, taken between load starts and ends.
So, you can add a quasi-preloader script on page, that tries to preload all of your hidden images, and, if the average time taken exceeds some threshold (say 100ms or something like that) per image - it starts your main preloader, so you avoid unnecessary page blocking / data loss on main preloader start.
As long as all your images are in cache - the quasi-preloader won't take too much resources to check all the images.
Some very "dirty" example of what should it look like:
window.needsPreloadingFlag=false;
window.onfocus = function () {
if (!window.needsPreloadingFlag) {
needsPreloadingFlag = quasiPreloader.checkHiddenImages();
}
};
yourApp.onUserActionThatProbablyNeedsPreloading = function (){
//that should be bound to events that require your hidden images
if (window.needsPreloadingFlag) {
yourApp.preloadImages();
}
//...
}
This is not about loading Facebook asynchronously or any kind of optimization here but to load it as fast as possible rather than as slow as possible ;)
My website contains a LOT of images. And I need the Facebook Like button to show up as soon as possible. But it seems the button doesn't load: it waits for all the images to be loaded before loading itself. Since I have many images, of course the Like button shows up very late. If the connection is really slow, that might even take one minute. You can see the issue here: http://www.totorotimes.com.
Any idea how I could do this?
Thanks a lot!
Take all the javascript code that is for the social media buttons out of your body tags, put them in a file called: "social.js" and then insert that file right above all the js files in yourhead tag. This will make your buttons load before the actual web page loads.
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.
I have a site using some ajax here: http://deezteez.com/
If you sort by "Newest" (top right drop down box) you will notice that the new images (of products that just got added recently) will take about 30 seconds to actually load in, even though the page is done loading. older images don't do this, even if I start with a clear cache.
Anyone have an idea of what would be causing this?
Chrome's console seems to show that your server is simply slow. The graph below is how your images load in. The light colored bar is when the image is requested. The dark colored bar is the image actually being downloaded.
And you can see they all get requested at the same time. But then it takes a while for the server to respond to those requests. Once the server responds, things seem to download quickly, but that response seems quite lagged.
What is going on behind the scenes on your server, I have no idea. But some suggestions:
Drastically lower product count per page, so that far less images are requested at once.
Use CDN services to speed up static asset delivery and even provide geographically local image download servers.
If you have image data being generated on the fly or pulled form the database on each request, DO NOT DO THAT. Or if you need to do that, use server side caching to prevent doing it over and over again.