Load album images with ajax or jquery

Question

I want to optimize my website, i'm using framework-y specifically using menu albums with isotope plugin http://templates.framework-y.com/gourmet/pages/menu-albums.html the thing is that every album has a lot of items (around 60) so loading every image when loading the page takes time, around 10 sec. is there a way to load each album just when clicked? maybe through ajax or jquery? so the page loads faster and doesn't download things that the user don't want to see

I'm pinting the albums with a query and a php cicle

every item in the menu is like this:

<div class="grid-item col-md-4 subcat-'.$subcategory['id_subcategory'].' row-20">
    <div class="advs-box advs-box-multiple boxed-inverse extra-content-cnt" data-anima="scale-rotate" data-trigger="hover">
        <a class="img-box lightbox i-center" href="'.$picture.'">
            <img class="anima" src="'.$picture.'" alt="" />
        </a>
        <div class="circle anima-rotate-20 anima">$'.number_format($data['precio']).'<span>'.$data['quantity'].' '.$datos['units'].'</span></div>
        <div class="advs-box-content">
            <h3>'.$data['name'].'</h3>
            <span class="extra-content">'.$data['includes'].'</span>
            <p>'.$data['description'].'</p>
        </div>
    </div>
</div>

Answer 1

https://github.com/verlok/lazyload It may help you. Or you can use this javascript function to load image.

var image = new Image();
    image.onload = function(){
      //after load
    };
    image.src = new_img;