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
...