Example: Use a Base Path for all Images

When all your images are located in the same base path, you might be use the imageBase parameter. If configured Lazy will prepend the base path to all of the images loaded by this instance. Lazy will even prepend this to srcset entries, if you're using them.

In result your html code will be much smaller and you can easily move images to another folder, just editing one line!

It is possible to set the data-imagebase attribute on elements too, to overwrite it, or to have smaller srcset attributes content. 


    <!-- will load 'images/1.jpg' -->
    <img class="lazy" data-src="1.jpg" />
    <!-- will load 'images/2.jpg' -->
    <img class="lazy" data-src="2.jpg" />
    <!-- and so on ... -->
    <img class="lazy" data-src="3.jpg" />
    <img class="lazy" data-src="4.jpg" />
    <img class="lazy" data-src="5.jpg" />
    <img class="lazy" data-src="6.jpg" />
    <img class="lazy" data-src="7.jpg" />
    <img class="lazy" data-src="8.jpg" />
    <img class="lazy" data-src="9.jpg" />

    <!-- this will overwrite the base and load 'uploads/0.jpg' -->
    <img class="lazy" data-src="0.jpg" data-imagebase="uploads/" />
                  

    img.lazy {
        width: 700px; 
        height: 467px; 
        display: block;
    }
                  

    $(function() {
        $('.lazy').lazy({
          imageBase: "images/"
        });
    });

 

Note: All examples verbose their actions to the sidebar on the left and even to your browsers console by console.log. Check the output there (hit F12 key to open your browsers dev tools).

Demonstration