Example: Retina Image Support

Lazy supports retina and other high density displays as well. Just set the retina related image in the data-retina attribute and the normal one in the data-src. Then the plugin will select the correct image for you.

Try to view this page by a normal and a retina / high density display. 


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

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

    $(function() {
        $('.lazy').lazy();
    });

 

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