I have an image gallery. It is powered by highslide and page contains the resized images previews (for example 100x100px, when you click on preview, fullsized picture is displayed, but that is not important...).
Images are uploaded to the gallery by users, and problem is, that on some point, about approximately 100 images on one page (=100 images which need to be resized by webbrowser for preview), page is loading VERY slow and freezes all the time.
Q1: Is there any javascript which will display for example FIRST 40 pictures (first 40 lines of a file) and other pictures will not be loaded? When I click 'next' it will display pictures 40-80, then 80-120... I dont even know if something like this is possible.
Q2: Or a javascript, which will load only pictures which are currently on the view? I found that one, it works fine, but when I scroll down to the end of my gallery, all the images have gone through my viewpoint, so they are loaded all... and it freezes aggain.
Q3: Or a script that will automaticly devide my page to tabs(each tab with defined file length)?
Thanks for every solution!
/EDIT
To: Frits van Campen
I have tried Lazy Load - http://www.appelsiini.net/projects/lazyload , but deviding into tabs would be more usefull.
//EDIT
TO: Mörre
I know that it would be much better if images was already resized and stored on my server, but either the original-sized images arent stored on my server, I have only src address of them.
just reduce the image size by their pixel.
Related
I have to scroll down my webiste to make my background images appear and also it takes a while, how could i fix that by javascript by adding some kind of loading screen before displaying whole website
here's my website: https://donajsky.5v.pl/
You can create something that loads the page on the background and show the user a loading screen, but that might not be a good idea in terms of user experience and SEO.
I´d suggest to improve loading speeds by reducing the size of your images (space6.jpg for example is over 3 MB) so that your site loads quicker.
You can also take a look at lazy loading. The page then only loads the visible images. When the user scrolls down, more images are downloaded in the background. See https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading for example.
I am using Google Drive picker (API), the drive has too many image files in it, whenever anyone opens the picker, thumbs keep loading, even after the files are selected and the picker is hidden, that eats up bandwidth very badly, I need to stop this behavior so as to save bandwidth, so I can either hide thumbs from the beginning, or tell the picker callback to stop loading thumbs, but I could not find a way for implementing any of these two approaches.
It is also worth mentioning that the picker loads original size image thumbnails (the thumbnails are just down-scaled original images, and consequently, their size is so huge, so imagine the bandwidth it takes to load a large number of thumbnails).
I see that the picker stops retrieving the thumbnails once I close it. However to reduce the amount of thumbnails, you could set the view mode to list. In this way the UI will show the elements in drive as a list and it will show the extension icon instead of the content thumbnails (eg, Spreasheets, docs, pdf, etc). As far as I have tested, only images and videos will show a thumbnail with the content of the file.
As all the files with the same extension will share the same icon, i think this will reduce the bandwidth it will take to load the files.
You can set this view as follows:
.addView(new google.picker.DocsView().setIncludeFolders(true).setMode(google.picker.DocsViewMode.LIST))
Hope this helps.
I've been looking around for an efficient js responsive image slideshow gallery but I cannot make up my mind.
Neat ones such as ResponsiveSlides come at the price of loading all the images beforehand. When the page loads, all the images are loaded as well. Since I have 50-60 images per slideshow, every page requires several MB to be downloaded when the page is loaded, resulting in delays and bandwidth consumption.
Do you have a more efficient strategy/library in mind?
I'm guessing you want an image slide with lazy loading so that images don't load until they enter the viewport. I know Owl carousel has it as an option and it's also responsive. I'm sure there are others.
You can try this gallery.....
http://johnpolacek.github.io/ResponsiveThumbnailGallery/
I am building a website on wordpress, where it has four div areas (please check the first image), and contents are:
AREA-1: it's loading plain text content directly from html codes.
AREA-2: it loads 4 posts with thumbnail images from category-1, and showing as a slider.
AREA-3: it also loads 4 posts with thumbnail images, but from category-2, and showing as a slider.
AREA-4: it loads a contact form with 4 fileds using Contact Form-7 plugin.
Now the problem is, while the page is loading, AREA-1 and AREA-4 loads fast and visible without AREA-3 and AREA-4, which looks much odd. This is how it looks like while the page is loading (following image):
How can I fix this problem please? I want to load them all-together.
There is a large image slider (on top) with four images on the page as well. So using onload event for area-1 and area-4 will cause area-2 and area-3 load faster. And if I use onload for all the areas, then page will remain empty, while all the slider images will load. They are much large image, and it will not look good.
So is there any way to load all the 4 areas to load at the same time, doesn't matter if the image slider (on top) is fully loaded or not? I am not much good with javascript. So any help will be really appreciating.
2 Options:
preload the images http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
hide the text areas until the onload event. http://www.w3schools.com/jsref/event_img_onload.asp
I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.