Example: Disabled JavaScript Fallback

It is possible that users get on your page with javascript disabled. In this case Lazy will not work, like every other scripts. But there is a way to show the images to all users.

Just put a noscript tag next to your Lazy image, containing the same image path. Afterwards use CSS to hide the Lazy image and use jQuery to show it for users with enabled JavaScript.

Try to view this page with disabled JavaScript by your own! 


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

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

    $(function() {
        $('.lazy').show().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