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

Ajouter à un CollapsiblePanelExtender, les événements OnExpanded et OnCollapsed


 5/27/2015

<script type="text/javascript">

//Ajout de deux événements au collapsible pannel
function cpeInit()
{
try
{
var cpe = $find('<%= cpe.ClientID %>');
cpe.add_expanded(cpeExpanded);
cpe.add_collapsed(cpeCollapsed);
}
catch (e)
{
 
}
}
 
//  A l’ouverture du panel
function cpeExpanded()
{
 
}
 
//  A la fermeture du panel
function cpeCollapsed()
{
 
}
 
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(cpeInit);

</script>

Lire >>

JQuery - Javascripts tricks


 5/20/2015

Supprimer tous les tags HTML d'une chaine de caracteres :

var stringWithoutHtmlTags = OriginalStringWithTags.replace(/(<([^>]+)>)/ig,"");

 

Utiliser replace all avec javascript, ex : Remplacer tous les points d'une chaine de caractere:

var chaineSansPoints = chaineAvecPoints.Replace(/\./g, "");

Replace(".","") remplacera seulement le premier point

 

Tester une date en jQuery avec une expression réguliere

- Fonction javascript

function testDate(str) {
   var m = str.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
   return (m) ? new Date(m[3], m[2] - 1, m[1]) : null;
}

- Utilisation

if (testDate(date) == null) {
    // Date false  

} else {
     // Date true

}

 

Tester si une chaine de caractere contient une sous chaine de caracteres (String contains substring)

if ($("#spnMessage").text().toLowerCase().indexOf("error") >= 0) {
…
}

 

Lire et obtenir le parametre dans une url (get query string parameter)

function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

 

Ajouter et supprimer une classe en jQuery

$("#theTextBox").addClass('highlightErrors');
 
$("#theTextBox").removeClass('highlightErrors');

 

Déclencher

...

Lire >>

  • 1