Как вставить многоточие в большой набор данных в HTML с наименьшей задержкой - PullRequest
Новая
       8

Как вставить многоточие в большой набор данных в HTML с наименьшей задержкой

2 голосов
/ 12 апреля 2011

Вставьте многоточие (...) в тег HTML, если содержимое слишком широкое упоминает, как вставить многоточие в содержимое HTML. Это решение работает, но я обнаружил, что когда оно применяется к большому набору данных (представьте 1000 делений), оно имеет тенденцию работать довольно медленно.

Мой JSFiddle демонстрирует эту проблему. Изменение переменной, которую я установил (numberOfDivs) с 10 на 100, значительно увеличивает время, необходимое для вывода результатов. Изменение этого числа с 100 на 1000 приводит к тому, что Chrome хочет убить страницу.

Похоже, что решение Jquery, и другие, которые я видел, все включают либо заполнение элемента в DOM текстом (я полагаю, что плагин Jquery, который я использовал, делает что-то в этом роде, это кажется дорогим для больших наборов данных) или использование функции, не поддерживаемой IE7 и другими более старыми браузерами (text-wrap: ellipsis).

Также кажется, что любые вызовы для получения element.offsetWidth или element.clientWidth обходятся дорого при работе с большими наборами данных.

Кто-нибудь нашел какие-либо оптимизации или надежные решения на стороне сервера? Когда я говорю «надежное решение на стороне сервера», я имею в виду такое, которое учитывает размер текста и размер содержащего div (или другого элемента). Простое создание подстроки текста - это одно из решений, но я не считаю это надежным.

Ответы [ 2 ]

1 голос
/ 12 апреля 2011

В прошлом я решал аналогичную проблему, и следующая оптимизация выполнялась лучше для наших целей.Это работает лучше, особенно для текстов, намного длиннее, чем требуется пространство.Но 1000 делений ... не знаю ...

Вместо цикла while в упомянутом решении , попробуйте что-то вроде этого: 

var diff = t.width() - el.width();
if (diff <= 0)
    return;
else {
    var avgWidth = t.width() / text.length;
    var redundantChars = diff / avgWidth;
    text = text.substr(0, text.length - redundantChars);
    t.html(text + "...");
}

while (text.length > 0 && t.width() > el.width()) {
    text = text.substr(0, text.length - 1);
    t.html(text + "...");
}

while (text.length < originalText.length && (t.width() + avgWidth) < el.width()) {
    text = originalText.substr(0, text.length + 1);
    t.html(text + "...");
}
1 голос
/ 12 апреля 2011

Никто не найдет надежного и производительного решения для этого, которое охватывает все браузеры и одинаково хорошо работает во всех из них, так как его не существует. Единственным надежным и эффективным решением будет чистый CSS, который поддерживается только подмножеством браузеров, которые большинство людей желает поддерживать.

Пока все браузеры, которые вы хотите поддерживать, не поддерживают text-overflow: ellipsis, вы можете иметь либо надежный (медленный js, который просматривает все параметры), либо быстродействующий (подстрока, сервер или клиент).

Единственный браузер, который не поддерживает трюк css - это Firefox. IE7 + и браузеры webkit, такие как chrome и safari, поддерживают его просто отлично. Opera поддерживает это -o-text-overflow

Если вы решите не поддерживать Firefox, вы можете поддержать все остальные браузеры, выполнив следующие действия: 

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;

Вам нужно white-space: nowrap; и overflow: hidden;, чтобы text-overflow работал хорошо.

Если вы можете жить с текстом, который нельзя выделить, вы можете использовать XUL-хак для firefox , но я редко нахожу его полезным для себя.

...