jQuery mobile listview est trop lent avec iscroll

Question

Je fais une application avec PhoneGap 1.3.0 et JQuery Mobile 1.0. Pour faire défiler un listview Je veux utiliser Iscroll mais la performance de défilement est trop mauvaise. Le défilement est trop lent.

J'ai également fait un test.

Si j'utilise le code sans jQuery Mobile, c'est rapide

<div id="scroller">
    <ul id="thelist" >
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

...

Mais si j'ajoute le type mobile jQuery listview Comme.

<div id="scroller">
    <ul id="thelist" data-role="listview" data-inset="true" data-theme="c">
        <li>Pretty row 1</li>
        <li>Pretty row 2</li>
        <li>Pretty row 3</li>

C'est lent. Comment puis-je le réparer?

Answer 1

Vous pouvez supprimer le -down et -hover Styles CSS de la feuille de style pour jQuery Mobile. Lorsque vous faites défiler une liste, vous "plane" votre doigt sur un article de liste qui le déclenche pour changer son style en raison du -hover classe qui est appliquée. Si vous changez le -hover classe pour être le même que le -up Classe alors aucun refonte ne se produira et le défilement sera beaucoup plus fluide. J'ai testé cela et cela a très bien fonctionné sur mon appareil Android 2.3.

Voici un exemple de ce que je veux dire, remarquez le -up/-down/-hover Versions des règles de classe:

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {
    border: 1px solid       #000 /*{a-bhover-border}*/;
    background:             #444444 /*{a-bhover-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bhover-color}*/;
    text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
}

.ui-btn-down-a {
    border: 1px solid       #000 /*{a-bdown-border}*/;
    background:             #3d3d3d /*{a-bdown-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bdown-color}*/;
    text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
}

METTRE À JOUR

Donc, pour apporter les modifications, j'ai suggéré, c'est aussi simple que de télécharger le framework mobile jQuery, en ouvrant la version non minifiée de la feuille de style CSS (également trouvée ici: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css), et supprimer le -down et -hover Des classes.

Vous pouvez télécharger jQuery Mobile ici: http://jquerymobile.com/download/

Fondamentalement, recherchez tous les .ui-btn-***-* Déclarations de classe et supprimer le code à l'intérieur de ceux où *** équivaut à hover ou down, et il y aura des multiples car il y en a un pour chaque thème, c'est ce que le dernier * est pour, a-e.

Le CSS ci-dessus ressemblerait à ceci lorsque vous aurez terminé:

.ui-btn-up-a {
    border: 1px solid       #222 /*{a-bup-border}*/;
    background:             #333333 /*{a-bup-background-color}*/;
    font-weight: bold;
    color:                  #fff /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
}

.ui-btn-hover-a {}

.ui-btn-down-a {}

Remarque que je n'ai rien fait au .ui-btn-up-a classe, c'est la classe par défaut et je ne veux pas modifier l'apparence de la page, je veux juste empêcher le navigateur de redessiner le document lors du défilement d'une liste.

Lorsque vous avez tous fini de modifier la feuille de style CSS, copiez le code et collez-le dans http://htmlcompressor.com/compressor.html, choisissez l'option "CSS" à droite, puis cliquez sur "Compresser". Cela créera une version minifiée de votre feuille de style CSS qui est prête pour l'environnement de production (cela réduira considérablement la taille du code).

Answer 2

La suppression .ui-btn-hover-x et .ui-btn-down-x n'ont fait aucune différence pour moi.

jQuery.mobile-1.1.1

La suppression de l'emballage de contenu l'a corrigé pour moi.

<div data-role='content'> </div>

Il fait défiler tout aussi fluide qu'une page Web dans Safari.

Answer 3

Regardez dans CSS3 transform

Avec l'accélération matérielle activée, la JQM ListView avec Iscroll fait défiler comme si elle était assis sur un beurre maintenant.

Ce comportement semble se produire uniquement sur les appareils mobiles.

J'ai fait un violoneur ici pour vous montrer comment cela fonctionne: (Utilisez un appareil mobile pour voir la différence)http://jsfiddle.net/suy7f/1/

Ce code est testé avec Cordova PhoneGap 2.4.0