I have a question about loading (hidden) images, only when they are visible in a lightbox sequence when loaded in HTML as a link.
This is my code:
<a href="../img/image_A_large" rel="lightbox[sequence_A]" data-title="© 2021">
<img src="../img/image_A_small.jpg">
<h2>Images</h2>
</a>
Basically, it loads an image (image_A_large) in a lightbox pop-up when the small one is clicked (image_A_small). Within this lightbox pop-up, one can navigate to other images which are loaded with a link, in order to add them to the current lightbox sequence (image_B, image_C, image_D, image_E, etc.).
However, all these images are loaded when accessing the site. But I want them only to load when they will be visible in the lightbox sequence (or when the lightbox sequence is opened in general, if the former is a bit too complicated). There are 12 of these similar sequences on 5 different pages, so it loads quite slow and also drains a lot of my available bandwidth.
Any ideas on how I can achieve this?
Cheers!
Related
I added a gif image in my html page but it was in the last section when I load my page it work immediately I want a way to pause or stop it until the user scroll down and reach it to work
Assuming you're using an animated gif, I think something called 'lazy loading' may help you. Essentially, this doesn't load an image until it's in view.
Typically lazy load is used to make pages finish loading faster. But in your case it could prevent your animation playing before it's in view.
Lazy loading images is done with javascript and you could use for example this jQuery plugin: http://luis-almeida.github.io/unveil/
I hope this helps you.
For a project a site is needed where when first loaded an animation appears that fades away and reveals the content of the site. I am fine with creating the animation and all. What I am not sure about is where to place it.
From a site ia point of view I see it like this. Either have the animation on the index page and once done remove that element with js or $ and reveal the index page. This means a reload will always show the animation again. This also means a click on the main logo that leads to the index page will also play the animation again. Something not really wanted or needed.
The only other option I see is having the animation on the index page and once done redirect to the home page where the site content is located. Like this a click on the logo can be set to either the home page or the index page. The info on the home page is also visible without watching the animation again since the home page has a separate nav link in the menu. Only if desired can the animation be watched again by clicking on the main logo.
From my perspective it will be the later. Though I ask you is this good practise? Is it OK to just have an animation on the index page and everything else on the home page?
I was thinking to either post this in https://ux.stackexchange.com/ or https://graphicdesign.stackexchange.com/ but I think this more concerns code architecture rather than design or ux because as mentioned the animation could also be loaded dynamically on the index page and once gone the content is shown on the index page. So you see I am not asking for opinion but rather for the right logic to tackle this task.
What method is best applied for this scenario? Would you consider having the animation on the index page and then redirect to the home page?
Linked
https://stackoverflow.com/questions/22090313/show-an-animation-before-show-my-index-html
https://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery
http://www.submittoday.com/splash_pages_and_search_engine_optimization.html
http://stackoverflow.com/a/22090389/1010918
https://stackoverflow.com/questions/30573395/page-loading-animation-method
https://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
I'm working on a web project and I want to load my webpages with an even transition. What I get right now is my photos and background downloading in a curtain-like manner. I want it to show up when it is all loaded instantly.
I don't mind if there is a progress bar or something but not the curtain-like manner.
I used the prefetch/prerender html 5 tag but with no success..
visit here :
http://hellenic-jewls.com/
and then try to hover to another webpage to see that my images are downloaded progressively like a curtain :
e.g. http://hellenic-jewls.com/classical/
ofcourse when the webpages are cached it's ok.
HTML5 prerender/prefetch doesn't work that way. You use them to hint to the browser that you think that page will be visited next and should therefore be prerendered. There is no guarantee that this will happen though... it's up to the browser to decide if it wants to prerender the page.
Further, there will only be one page prerendered at any one time.
What you can do is hide your images, then use a script like https://github.com/desandro/imagesloaded to signal when the images are loaded, at which point you can show the images (with a fade-in transition if desired)
I have a webpage that shows an image gallery for the current week, and I have a top bar navigation "prev" and "next" links to cycle through the galleries. Currently clicking on the links causes a whole page refresh. I think the user experience would be smoother if, when we click "next" we animate a slide-in of the next page content from right to left, and vice versa, if we click "prev" we animate the previous week of results from left to right (similar to how page transitions work in a mobile app when you swipe). Note, I do not need to detect actual swipe gestures and I think jquery mobile markup is overkill.
To preload the data that will be sliding in I can make an ajax call, or even have the data preloaded in json for me to construct the replacement html off screen. I will use html5 window history push state to change the url to the actual location we will be navigating to. The only thing I haven't been able to find is to do the actual animation. I have looked into carousels, but none of them quite do what I want. Is there an existing library that handles just the animation of page transition, having that slight recoil bounce effect?
Thanks.
EDIT: I just found jquery.animate which I think might do the trick.
There are any number of jQUery based image gallery libraries that you might want to choose from. If you can't find one to transition between different galleries teh way you want to, it should not be a problem to use jQuery to asynchronously load new galleries and then animate them into place.
In my HTML page I load about 40 images from the same domain (on page start up, all images load at same time). The problem is, sometimes some images don't show up, they're just a white box with a red X on the top left side. But if I try to refresh the page once (or a few times), that image then loads fine.
Does anyone know why this happens and how to ensure all images load fine?
This happens because the images aren't finished loading in time. You could try pre-loading them with javascript
What I would do is make sure the images are small (using thumbnails) so they will load. Then, load only a few at a time and load more as the page is scrolled or whenever the user requests more images.
See google images or pinterest for an example of how it would work. As you scroll the page, more images are loaded, as opposed to loading them all at once.