Почему это так: код для пиктограмм работает в IE 8, но быстро работает в Firefox, Chrome и Opera - PullRequest
0 голосов
/ 16 ноября 2011

Код ниже используется для первоначального отображения <div> элементов с логотипом, именем и некоторыми ссылками.

При вводе символов в поле фильтра отображаются только те элементы <div>, которые содержат введенные символы (остальные скрыты).

:icontains - это нечувствительный к регистру вариант фильтра :contains.

В Firefox, Chrome и Opera набор символов автоматически фильтрует элементы <div> (50 миллисекунд или около того). Выполнение того же в IE 8 занимает почти 5000 миллисекунд.

Код ниже показывает только пару <div class='linken2col filterbaar'>. На странице, для которой я ее использую, у меня около 150 <div> элементов.

Любая идея, что может вызвать проблему в IE 8 (я не пробовал в IE 9, но я подозреваю, что многие посетители моего веб-сайта все еще используют IE 8). Было бы жаль, что я не смог использовать этот код только потому, что Microsoft делает что-то неловкое с кодом Javascript.

  <form name="searchBox">
     Zoek naar <input type="text" name="filterargument" id="filterargument" />
     <input type="button" value="filter..." />
     <i>(deel van de) clubnaam , de federatie of het clubnr</i>
  </form>

  <div class='volledige-breedte floatleft'>

  <div class='linken2col filterbaar'><a href='http://www.staplijst.com/wsv-wetteren.asp' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/010.jpg' class='logo100' alt='WSV Wetteren AKTIVIA 010' align='left'></a><a href='http://www.staplijst.com/wsv-wetteren.asp' target='staplijst_link'><b>WSV Wetteren</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 010<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-wsv-wetteren-aktivia-010.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV Wetteren AKTIVIA 010'></a></div></div>
  <div class='linken2col filterbaar'><a href='http://www.wandelclubegmont.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/163.jpg' class='logo100' alt='WSV Egmont - Zottegem AKTIVIA 163' align='left'></a><a href='http://www.wandelclubegmont.be' target='staplijst_link'><b>WSV Egmont - Zottegem</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 163<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-wsv-egmont-uit-zottegem-aktivia-163.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV Egmont - Zottegem AKTIVIA 163'></a></div></div>


  <div class='linken2col filterbaar'><a href='http://www.zandstappers.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/A044.jpg' class='logo100' alt='Wandelclub Zandstappers v.z.w. VWF A044' align='left'></a><a href='http://www.zandstappers.be' target='staplijst_link'><b>Wandelclub Zandstappers v.z.w.</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>VWF A044<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-zandstappers-uit-wechelderzande-vwf-a044.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor Wandelclub Zandstappers v.z.w. VWF A044'></a></div></div>
  <div class='linken2col filterbaar'><a href='http://www.waterhoekstappers.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/345.jpg' class='logo100' alt='De Waterhoekstappers - Heestert AKTIVIA 345' align='left'></a><a href='http://www.waterhoekstappers.be' target='staplijst_link'><b>De Waterhoekstappers - Heestert</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 345<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-waterhoekstappers-uit-heestert-aktivia-345.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor De Waterhoekstappers - Heestert AKTIVIA 345'></a></div></div>


  <div class='linken2col filterbaar'><a href='http://www.stormvogels.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/070.jpg' class='logo100' alt='WSV De StormVogels vzw Oostende AKTIVIA 070' align='left'></a><a href='http://www.stormvogels.be' target='staplijst_link'><b>WSV De StormVogels vzw Oostende</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>AKTIVIA 070<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelclub-stormvogels-uit-oostende-aktivia-070.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor WSV De StormVogels vzw Oostende AKTIVIA 070'></a></div></div>
  <div class='linken2col filterbaar'><a href='http://www.wandelmee.be' target='staplijst_link'><img src='http://www.staplijst.be/images/groot/A054.jpg' class='logo100' alt='wandelmee.be VWF A054' align='left'></a><a href='http://www.wandelmee.be' target='staplijst_link'><b>wandelmee.be</b></a>&nbsp;<img src='http://www.staplijst.be/images/staplijst-zonnetje.gif' class='inline-icon16' alt='licentiehouder van Staplijst'><br><br>VWF A054<br><div style='text-align:center;'><a href='http://www.staplijst.be/wandelmee.asp'>alle statistieken en grafieken&nbsp;<img src='http://www.staplijst.be/images/btngrafiek24.png' class='inline-icon24' alt='wandelstatistieken, uitslagen en grafieken voor wandelmee.be VWF A054'></a></div></div>

  </div>

  <script type="text/javascript">
         /* ---- extra selector "icontains" registreren ------------------------------ */
         jQuery.expr[':'].icontains = function(a, i, m) {
            return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
         };

         var $filterArgument =  $("#filterargument");

         $('#filterargument').keyup(
            function() { performFilter(); }
         );

         function performFilter() {
            /*var filterArgument = $("#filterargument").val();*/
            var filterArgument = $filterArgument.val();

            var t1 = +new Date;

            if (filterArgument === '') {
               $('.filterbaar').show(); }
            else {
               $('.filterbaar:not(:icontains("' + filterArgument + '"))').hide();
               $('.filterbaar:icontains("' + filterArgument + '")').show();
            }

            var t2 = +new Date;
            alert ( filterArgument + ':' + (t2 - t1) + ' miliseconds');

         }
  </script>

Ответы [ 2 ]

1 голос
/ 16 ноября 2011

Попробуйте, чтобы увидеть, будет ли это лучше:

jQuery.expr[':'].icontains = function(a, i, m) {
  return (a.textContent || a.innerText || getText([ a ]) || "")
    .toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

Изменить: на самом деле, мне нужно изменить этот код, у вас нет доступа к elem или match так же, как ядро.

более чем вероятно, что это не будет быстрее, но это способ, которым реализован нативный: содержит.

Редактировать: Чтобы действительно сделать это быстрее в IE, вам может потребоваться представить элементы в объекте или массиве, а затем выполнить всю фильтрацию, используя этот массив, а не элементы html. Затем вы можете показать элементы на основе массива / объекта. Этот метод очень похож на то, как плагины с данными позволяют сортировать и фильтровать, что все еще достаточно быстро, чтобы быть приемлемым в IE.

Редактировать для комментария: Вот как я бы реализовал фильтрацию с помощью массива: http://jsfiddle.net/Tentonaxe/Ju6TF/1/

var $filterArgument =  $("#filterargument");
var filterCache = $.map($(".filterbaar"),function(el){
    return {
        el: el,
        text: (el.textContent || el.innerText || $.find.getText([ el ]) || "").toUpperCase()
    };
});
$('#filterargument').keyup(performFilter);
function performFilter() {
    /*var filterArgument = $("#filterargument").val();*/
    var filterArgument = $filterArgument.val();
    var t1 = +new Date;
    $('.filterbaar').show();
    if (filterArgument === '') {
        return;
    }
    else {
        $(filterCache).filter(function(el){
            return this.text.indexOf(filterArgument.toUpperCase()) == -1;  
        }).each(function(){
            $(this.el).hide(); 
        });
    }
    var t2 = +new Date;
    alert( filterArgument + ':' + (t2 - t1) + ' miliseconds');
}
1 голос
/ 16 ноября 2011

Если единственная переменная, которая изменилась, это браузер (единственное отличие - использование IE8), то это всего лишь пример того, как задать вопрос.IE8 занимает так много времени, потому что IE8 медленный.

В некоторых случаях альтернативные подходы могут использовать более оптимизированный JS, но я, честно говоря, не знаю, какие функции вам придется поменять, чтобы даже начать догадываться.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...