I m building a website where i m using some gif file but the gifs start animating as soon as the page loads. I want them to trigger as the user scroll on to the particular gif section i.e current viewport. See example: http://www.invisionapp.com/
I have searched the entire internet but couldnt get the simplest way of doint that. Anybody having any idea please assist.
The website you have shared is using something known as lazyload. It will load images/videos only on scroll.
For some lazyload alternatives, please refer to these:
- How to lazy load natively
- Vanilla lazy load library on Github
What you can do is use two images, one static and one which has an animation. So, when user scrolls over target, in your case viewport, then, you replace a static image with the animated gif image.
Related
I would like to integrate some of fancybox's features into galleriffic. Basically I want to have a gallery of images with their respective thumbnails using galleriffic. Besides the styles my approach looks very similar to: http://www.twospy.com/galleriffic/example-2.html
Additionally, I want to be able to zoom into the image being shown. For such prupose I am using fancybox. An example of its behaviour can be found here http://fancyapps.com/fancybox/demo/
I have managed to make what I described above slightly modifying the galleriffic buildImage function leaving it as follows:
.append('<span class="image-wrapper current"><a class="advance-link fancybox" rel="group" href="'+imageData.image.src+'" title="'+imageData.title+'"> </a></span>')
Now, galleriffic adds the fancybox class fancybox needs as well as the image source. This works wonderfully.
At this point I find a problem I don't seem to find a neat solution for. Fancybox allows to navigate through a collection of images by clicking on the right/left side of each image to go to the next/previous image in the collection (as you may have noticed in the demo provided above). I would like to make use of this feature as well, so that users can navigate through the gallery by navigating through galleriffic's thumbnails, as well as through a zoomed version of the images using fancybox.
The problem I find here is that galleriffic creates the a class="fancybox" only for the image whose thumbnail has been clicked. This makes that fancybox is only able to find one image of the gallery. I don't want to define the class fancybox to the 's that define the thumbs for galleriffic because i dont want the images to be zoomed when clicked on the thumbnail but on the main image.
In a way, what i need is to generate all the 's with the fancybox class but hide all the not shown, instead of generating each time the one I need via galleriffic. This is the only solution I can come up with but it is not neat. I like how galleriffic deals with generating the main image each time the thumbnail is clicked.
I am wondering if someone can come up with a nicer solution. For example, fancybox could be able to know which image comes next by searching in the next galleriffic thumbnail's .
I have tried to make a working jsfiddle demo but there's too much code involved. Also there is no definite problem but a conclict of implementations. I think you can replicate my current situation easily.
Thanks for the effort!
I tried your method above, editing the BuildImage function as you did. For me, it successfully links to the image, but does not load in FancyBox.
I have this code in the main file:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
You were successful combining the two, correct?
I was trying to find a jQuery plugin that will achieve similar preloading effect like on this website Example, After intense research I wasn't able to find anything useful. Can anyone suggest a plugin that can achieve this?
Go to your Example page and inspect it with firebug ... If you remove the class="ready" from the body tag then you will see the actuall div that is overlayed over the entire page.
So all it is, is a div with transparency and an image at the center with a very high z-index.
When everything is loaded underneath you trigger a hide of the div ... and the page is there.
You could fire the hiding after the dom is ready or after a timeout etc...
On my website there is a webpage where there are 100 images and it is inelegant to see the images that are loaded one at a time from the browser.
Is there some way to get it more elegant and nice to see ?
You could Lazy Load the images, which means they are only loaded when displayed on the browser. This works by simply using the following:
$("img.lazy").lazyload();
However, if the images which will be visible on page load are very large file size, theres not much you can do to prevent this.
An idea I have used before to make this more user-friendly is to place each img element in div which has a background image of an ajax loader. This at least gives the appearance that something is loading. Then once the image is loaded, this will overlay the loading image.
EDIT: Seeing your latest comments, if you are using very small images, as #afaf12 has pointed out, using CSS Sprites would be a suitable solution. A lot of large sites, including StackOverflow, make use of these. It means rather than 100 HTTP Requests being made for all the images, 1 HTTP Request is made (ie. 1 image download), and then CSS is used to position this image in different places.
There are various different CSS Sprite generators also available to prevent you from the laborious task of making this yourself:
Since images are very small, this could be a situation where css sprites are useful.
Instead of having 100+ small images, you have 1 large.
When you want to show a specific image, you have to specify background coordinates, for example:
div#div1 {background-position:0px -100px}
One way to make it look more pleasing is to make the images fade in when they have been loaded:
$('img').css('opacity', '0.0').load(function(){
$(this).animate({'opacity': '1.0'});
});
Demo: http://jsfiddle.net/Guffa/gzFFN/
http://code.google.com/p/jquery-appear/
jQuery appear event that is triggered when objects "appear" i.e. become visible on screen.
Create containers for all the images, and only load the actual images when they become visible on screen.
Another interesting solution can be found on this stack link. It is for all content but the code provided in an answer can be applied to image loading as well. Link
I am building a splash page for a website with jquery animations.
My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.
Ok, heres what I did:
the container div has the following css: background:url(images/colorcity.png)
if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect.
to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')
What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.
I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.
Thank you ahead of time for any help.
The page: http://roughgiraffed.com/barrandbarrbags/
Try including this at or near the top of your page:
<img src="images/greycity.png" style="display: none;" />
That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.
Very cool page, by the way (and it seems to work great in firefox).
I need to prioritize the downloading of (in my case) images.
To do this I would prefer to use some kind of plugin (preferably for jQuery) that lets me do this without having to build my own downloadqueue mechanism.
Consider this scenario:
You have a web page.
Your web page is able to show a given user three images.
These images are only shown one at a time at the users request.
You would then ideally want to load the images from top to bottom until the user makes a selection. You would then want his selection to move up the queue and become next in line (with every selection he makes).
Of course in a page with only three images this isn't really a problem, but with more and more images it becomes important.
I am currently only using background-image to show images and would like to keep it that way.
Oh, and also, I would like a "spinner.gif" to show while an image is loading.
Any suggestions?
Thanks.
UPDATE
I ended up making my own queueing system based on this: http://jqueryfordesigners.com/image-loading/
Assuming the actual page will have a lot more than three images, take a look at this image Lazy Load Plugin . It's based around what is and what is not below the fold, works sequentially through the images, and can be configured to preload in X ones below the fold as you are scrolling. It allows for a placeholder image but might need some rewriting if you want it to expose background images rather than working on actual img tags.
Here's an example of loading 'on-demand' or when scrolled into view. Though not directly answering your question but is fundamentally similar.
http://www.webresourcesdepot.com/dnspinger/
Try scrolling down and the page gets loaded with my content. Will work for images as well.
The resource for this demo can be found at "Load Content While Scrolling With jQuery".