Lazy load images using javascript

[taylormoore540]

I’d like to lazy load these images to improve the performance of the website. I’d like to have a default number of images already displayed and I want the remaining images to lazy load when the user clicks the “load more” button. This is what I have so far.

[Mittineague]

There were some suggestions in this recent topic

Load image onClick with JQuery

Currently, all of the images are downloaded as soon as the page is opened. I’d like to make it so that the images are downloaded when the user clicks “load more” because this is more efficient and saves bandwidth. https://codepen.io/anon/pen/NprawN

[Jasmin_A]

Here is jQuery solution for that:

      function lazyLoad(className){
            var i = 0;
            $(className).each(function () {
                while (i <= 2) {
                    var $currentElem = $(this);
                    var $img = this;
                    var img = new Image();
                    img.src = $img.dataset.src;
                    img.onload = function () {
                        $img.setAttribute("src", img.src);
                        $img.removeAttribute("data-src");
                        $img.removeAttribute("height");
                    }

                    $currentElem.removeClass(removeClass);
                    i++;
                }
            });
        }

        $(document).on("click", "#loadMore", function(e){
           e.preventDefault();
           lazyLoad(".lazy-image"))
        }) 

You should give some class to all of your images (for example: “lazy-image”) and give them data-src attributes with link to the image:
<img class="lazy-image" data-src="http://i.imgur.com/TDdxS9H.png">

When you click on your button script will catch all “lazy-image” classes and replace copy data-src content into src attribute. After that it will remove “lazy-image” class.