prettyPhoto media loading very slowly in Chrome

Question

I'm having a problem with prettyPhoto media WordPress plugin (lightbox type) script in Chrome. It works beautifully in other browsers, but it takes forever to load in Chrome.

When using this script it is supposed to show the thumbs on the bottom of the lightbox effect, but it only works if I select "IE 6 fallback" support. Not sure why?

If I take off the thumbnails from the overlay everything speeds up nicely, but I need the thumbnail effect to work.

Any ideas on what is causing it to load super slowly? Here's the link to my site: http://ecbiz129.inmotionhosting.com/~sar8475/sign-types/ click on "View more Signs" to see the effect.

Thanks so much for your help, -Caleb

Answer 1

I had the same problem. You likely don't need this any more, but just in case anyone else has this problem, here it is:

The first hint of the issue with Chrome and prettyPhoto is that it occurs only when gallery images have a very large resolution and when thumbnails are being shown. What seems to be happening is that Chrome starts to choke while resizing images from their natural size to the much smaller size on screen.

The default algorithm for image rendering used by Chrome is probably different than with other browsers and it seems to be significantly slower for large images.

That was for the cause, now for the possible solutions:

1. Obviously, resize images, either manually or using some service
2. Use CSS to change the default image rendering algorithm, e.g:

img{
    image-rendering: -webkit-optimize-contrast;.
}

This one seems to be much faster than the default setting and it did the trick for me. You can try experimenting with other options as well. Of course, you can limit the selector to apply this only to the thumbnails and not affect other images.