Example: Use Other Attributes

By default, Lazy will use the data-src attribute for normal images, data-retina attribute for retina images and data-loader for custom loaders of the elements, to get the loadable information. If you need or want another attribute names to store this information, you can easily set it by the attribute, retinaAttribute and loaderAttribute parameters.

After loading an image Lazy can remove all those attributes from the elements. If you want to hold the attributes on your elements, like in the title attribute in this example, use the removeAttribute parameter and set it to false. 


    <img class="lazy" title="images/1.jpg" data-density="images/retina/1.jpg" />
    <img class="lazy" title="images/2.jpg" data-density="images/retina/2.jpg" />
    <img class="lazy" title="images/3.jpg" data-density="images/retina/3.jpg" />
    <img class="lazy" title="images/4.jpg" data-density="images/retina/4.jpg" />
    <img class="lazy" title="images/5.jpg" data-density="images/retina/5.jpg" />
    <img class="lazy" title="images/6.jpg" data-density="images/retina/6.jpg" />
    <img class="lazy" title="images/7.jpg" data-density="images/retina/7.jpg" />
    <img class="lazy" title="images/8.jpg" data-density="images/retina/8.jpg" />
    <img class="lazy" title="images/9.jpg" data-density="images/retina/9.jpg" />
    <img class="lazy" title="images/0.jpg" data-density="images/retina/0.jpg" />
                  

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

    $(function() {
        $('.lazy').lazy({
            attribute: "title",
            retinaAttribute: "data-density",
            removeAttribute: false
        });
    });

 

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