Search jQuery

jQuery Forum

Using jQuery

jQuery_be..

Animating an element is not always smooth?

in Using jQuery • 8 years ago

Hi everyone:

I have had this problems a couple of times now and have not been able to figure out what the problem is.

Sometimes when I animate an image on a website(Like in an Image gallery), the animation is very rocky and not smooth at all. I did a lot of testing, but every time i seem to find something something else comes up.

I have done tests with different dimensions of images obviously the size was also different, but

although at the bigger sized images seem to make every animation on the same page rocky, sometimes even small sized images are making it rocky.

When I opened the images in Photoshop and saved them again and put the quality setting of the jpg to 6 out of 12 all the animations have become nice and smooth.

I guess this issue could depend on the image itself namely the dimension, size, file type and the method used to create the image.

But it could also be an issue with the computer or even browser in which the site is loaded.

Please let me know of anything you know about this issue, any bits of information you might have or similar problems!

Hoping for your input!

P.S.

I made a simple jsfiddle in which a very large image. The size of the image is 13.1MB and 5120x3840px.

Once it loaded, and I click the animate button the picture animates and for me, it is very rocky.

try it for yourself : http://jsfiddle.net/me2loveit2/zwuN8/

Replies(12)

Kevin B

Re: Animating an element is not always smooth?

8 years ago

In what situation would it make sense to display an image that is 13 mb in a browser? the browser can only display up to 72 DPI. Print quality images should be download only.

I can see the need for large dimension images for image zoom applications, but they still shouldn't be any more than 72 DPI if they are going to be displayed in a browser.

-- Kevin

jQuery_be..

Re: Animating an element is not always smooth?

8 years ago

Hi Kevin:

This is obviously just an example. I am trying to demonstrate the rocky animation.

The rocky animation can be observed with a lot smaller images too,

plus if you animate a number of smaller images, say in an image gallery, they can easily add up to 13MB.

With my experiments I figured out it does not matter what you animate it will be rocky if there are big images on the page even if the big image is not the element being animated.

Let me know what you think!

Kevin B

Re: Animating an element is not always smooth?

8 years ago

I've definitely experienced this issue, it can also become "rocky" just scrolling the page using the scrollbar when using a large amount of images.

It is definitely something you'll have to design/code around, it's a browser limitation.

-- Kevin

jQuery_be..

Re: Animating an element is not always smooth?

8 years ago

Hi Kevin:

Yes, you are probably right, but in order to do that I would like to know exactly what is causing the rocky animation, what it depends on and what it does not depend on.

I need to know the limits of the individual browsers.

Do you know the limitation of browsers in the area this problem would apply to?

By the end of this I am hoping to optimize and improve my galleries. I do not exactly know the problem though.

Thanks for your input keep it coming!

Kevin B

Re: Animating an element is not always smooth?

8 years ago

Well, I've done both large images, and lots of images on one page, but never both.

In both cases, however, i simply limit the number of images that are currently attached to the DOM.

I've never really had to deal with choppy animations using that mindset. Any images that aren't static i load into the page after DOMReady and preload before attaching to dom when possible.

If you are getting a choppy animation, try making a small sample and animate the image by itself on a page to see if it is still choppy. If it's still choppy, then it's too large.

-- Kevin

jQuery_be..

Re: Animating an element is not always smooth?

8 years ago

Hi Kevin:

Yes that is a good idea.

I have a couple of follow up question to this idea:

When I pre-load an image, is it loaded into the DOM, or will it only be in the DOM once I put the element on the page?

Do all browsers keep recent images in the cache?

So that it can re-load quickly making for a smooth experience.

and

Will .remove() remove it from the DOM?

More ideas are welcome!

Kevin B

Re: Animating an element is not always smooth?

8 years ago

both .remove and .detach remove it from the dom

Once an image is preloaded, it will reside in the cache for at least as long as the page is open. Once the page refreshes or navigates away, it may be cleared based on browser settings.

It is only part of the dom if you attach it to the dom, such as making it the background of an element or appending an image element to an element that is attached to the document.

I have a plugin that may help with the preloading if you don't want to do it manually, and i have a modified version of it that i'll be committing some time this weekend if i get a chance to finish it. The newer version limits to only preloading 2 images at a time to better handle preloading large numbers of images at once.

https://github.com/tentonaxe/jQuery-preloadImages/tags

-- Kevin

jQuery_be..

Re: Re: Animating an element is not always smooth?

8 years ago

Hi Kevin:

Thank you!

This is the first solution I have now, I will do a couple of tests and see how well this works for me!

And am I not pre-loading the image in my jsfiddle example from post 1?

Thanks again!

HelenInTr..

Re: Animating an element is not always smooth?

8 years ago

I don't know what kind of gallerys you use but even with 100 thumbnails you will barely reach 13mb.
I have never seen that much traffic even on popular photo stocks.
My suggestion is just to create thumbnails with a filesize less than 50kb. This means 200 thumbnails for 10mb what should be very practicable.
You just can't rely to any browser limitations since we have that much different hardware limitations. I.e. slow graphiccards or drivers will let your animations allways be "rocky".

Work around that by using small files, avoiding traffic and direct links to large files.

jQuery_be..