Lazy load images using javascript

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.

There were some suggestions in this recent topic

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);


        $(document).on("click", "#loadMore", function(e){

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="">

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.