Lazy load for multiple galleries per page, how to implement?

Question

JavaScript

There are several gallery-boxes on one page with a different set of photos that open, for example, when you click on the "gallery 1" link in the modal window

<div class="gallery-box">
        <div class="view">
          <div class="big-image"><img src="<%=game.photos.first.image.url%>" width="600" height="300"></div>
            <% if game.photos.count > 1 %>
              <a href="#" class="prev"></a>
              <a href="#" class="next"></a>
            <%end%>
        </div>
            <div class="thumbnails">
             <% game.photos.each do |photo| %>
                <a href="<%= photo.image.url%>"><img src="<%= photo.image.url(:thumb)%>"></a>
            <%end%>
            </div>
 </div>

<script>
$(function() {
    function a(c, d, a, f) {
        var e = c.length,
            b = 0;
        c.each(function(g, a) {
            $("img", a).on("click", function(e) {
                e.preventDefault();
                b = g;
$(d).stop().animate({opacity: 0}, 400, function() {
         d.src = a.href; $(d).animate({opacity: 1}, 400);
});
                c.removeClass("active");
                $(a).addClass("active")
            })
        });
        a.click(function(a) {
            a.preventDefault();
            b--;
            b < 0 && (b = e - 1);
            $("img", c.eq(b)).click()
        });
        f.click(function(a) {
            a.preventDefault();
            b++;
            b %= e;
            $("img", c.eq(b)).click()
        })
    }
    $(".gallery-box").each(function(c, d) {
        a($(".thumbnails a", d), $(".big-image img", d)[0], $(".prev", d), $(".next", d))
    })
});
</script>

There are a lot of photos in each gallery (150-300) and there can be more than 10 galleries themselves.
How can I add lazy loading here or what will work to get something like this:
1) the first 1-3 photos in each gallery are loaded on the first page load
2) for example, click on the link "gallery 2", a modal window opens with the second gallery and after that all photos from this gallery start loading

very urgently, Help!)

Answer 1

Try BBC-News/Imager.js