2

I have created a wp theme. here is one of its page http://www.durgeshsound.com/gallery/

When you click on any view album then it opens it corresponding pics of that album. Each album consists 10-12 pics and hence on whole page, around 80-90 images are there.

The problem is its takes too much time to open the pages because of 80-90 images. Is there any way to load only cover image when page loads and load album pictures one by one when view album is clicked? Please note that cover picture is set as featured image and other album pictures are added in media in post.

here is my codes

Javascript: http://pastie.org/9658839 Page template code in wp : http://pastie.org/9658843 CSS: http://pastie.org/9658847

please help.thanks in advance

varsha
  • 1,598
  • 1
  • 14
  • 29
  • 2
    I think the best solution would be to use [lazy loading.](http://stackoverflow.com/questions/5117421/how-to-load-images-dynamically-or-lazily-when-users-scrolls-them-into-view) – ghost Oct 20 '14 at 05:29

3 Answers3

1

Could try a Lazy Load js plugin such as: http://www.appelsiini.net/projects/lazyload

James
  • 153
  • 8
1

There are few steps to optimize the performance of your site when you are using images in your page.

  1. Use Lazy Loading
  2. Use sprite image to avoid multiple http request for small images.
  3. Use Caching for static images. that will help to avoid unnecessary http requests.

Sprite Example: You can see that SO also using sprite image in this site. enter image description here

Shell
  • 6,460
  • 9
  • 34
  • 68
1

lazy loading is helpful if you used high resolution images on your website then it’s a best solution for you to make your web site looks professional. This makes the page load faster and reduce server traffic since the client loads the images in the region what they look at. this is best example to learn how to do it.

to get plugin.It can be used as a simple lazy loader, simply as a responsive lazy loader (taking care of the breakpoint) or as an advanced lazy loader taking care of breakpoint and display.