Mise en place du lazy loading en asp.net

Dans ce post nous allons voir comment utiliser le lazy loading de façon simple.

1) Télécharger le scripts requis:

http://www.appelsiini.net/projects/lazyload/jquery.lazyload.js

2) Dans le header de la page web: (Html, asp.Net, MVC,...)

Référencer les scripts :

<scriptsrc="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"type="text/javascript"></script>

<scriptsrc="Scripts/jquery.lazyload.js"type="text/javascript"></script>

<scripttype="text/javascript">
     $(document).ready(function () {
         $("img.lazy").lazyload({
             effect: "fadeIn"
         });
     });
</script>

3) Ajouter les images:

Liste des images :

   <ul>
            <li>
                <img class='lazy' data-original='images/img1.jpg' src='images/grey.png' width='640' height='480'>
            </li>
            <li>
                <img class='lazy' data-original='images/img2.jpg' src='images/grey.png' width='640' height='480'>
            </li>
            <li>
                <img class='lazy' data-original='images/img2.jpg' src='images/grey.png' width='640' height='480'>
            </li>
        </ul>

L'image avec la source grey.png correspond a une image grise de 1px/1px qui sera affichée avant l'appel de la fonction lazy load.

Le chargement des images aura lieu uniquement lorsque l'utilisateur déplace la scroll bar. De nombreuses autres fonctions existent dans ce plugin mais ce n'est pas le sujet de ce post, nous verrons cela dans le post "Lazy Loading avancé".