Mise en place du lazy loading en asp.net


 5/27/2015

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

...

Lire >>

  • 1