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/
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'm want to load images of products in a website with an animation of an hexagon grid
Hex_loading DEMO
I would like to know what is the best way.
I've read about inserting a gif, but I think image quality wouldn't be good; or video, but I don't know if it's to much for what I want (also I would have to load directly images for mobile devices).
Is there any other tecnology I'm missing out that would be a better fit for what I want?
Thank you in advanced
I don't think there is a way to change the loading pattern. But you can wait for the image to be loaded and then play an animation.
I suggest using a html5 <canvas> element to animate the images.
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.
What is the best practice to use when swapping an image on a webpage? Altering the image source or just showing/hiding multiple images on the page?
you have to choose in order to balance speed, with your two options:
Altering the image source
this way, the page will load faster because it only gets the visible images but it will take a little longer to show the new image when you change src attribute
just showing/hiding multiple images
this way, you are loading all the images on page load which will make it slower on loading and faster on swapping the images
At the load time, multiple images will slow down the webpage, but at the execution time, I think it will be fastest to show/hide the images
I have a layered div component which displays a successive series of large kb images by slide-animating away the top image to reveal the next image below. I'm trying to understand how best to approach this.
Approach 1:
layer a number of divs on top of each other, each with an image assigned as background, and slide away the divs as needed.
Will the hidden divs load their images on page load, or only when they are revealed? Is this browser/client specific behavior? Do all images (jpegs, pngs) behave the same way in this regard?
Approach 2:
Use only two divs- One that handles sliding, the other that will load and reveal the next image.
In this case, is it possible to pre-load the next image, so that the javascript isn't slowed down when the next image is revealed?
Thanks- and if anyone has other ideas, I'd love to hear them.
Your first approach, even if the images are 'hidden' via CSS, will load all images by all browsers via HTTP requests. Your second approach or some variant of it is probably better.
I'd recommend using AJAX to pull down each image as you go. It's definitely possible to preload the images.
You may want to consider existing slideshow/lightbox type of plugins for jquery or javascript. It's been done so many times you will sort of be recreating the wheel (unless it's more of a learning experience thing)..
Here's an interesting example of preloading with callbacks to alert you when it's ready. Maybe a good one to adapt?
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
The first approach certainly degrades better. It will leave the images available and visible if viewed on a CSS-challenged browser. But that comes at the cost of having to pull down all the images from the get-go. The second approach is lighter on the initial hit, at the cost increased code complexity swapping images in/out.
You can definitely pre-load images with Javascript. just create an image object and set its source to whatever you want, which will automatically trigger downloading of the image. It doesn't have to be inserted into the DOM or visible to the user to do this.
Hidden divs SHOULD load their content automatically, whether they're visible or not. I can't think of any PC-based browsers that wouldn't do this, but I'd hazard a guess that some browsers intended for resource-limited devices (cell phones for one) might optimize things and delay loading contents until the container's made visible, to save on network traffic.