В настоящее время я извлекаю много информации из базы данных и хотел бы отображать эту информацию в виде миниатюр на сайте. Каждая строка, собранная из базы данных, содержит изображение и некоторую другую информацию, которая появляется в миниатюре.Медленное создание divs с использованием innerHTML и + =
Когда информация собирается ли использовать функцию под названием printAllMini, который печатает все дивы в контейнер с помощью printMini для каждой строки информации.
printAllMini = function() {
console.log("PRINTING!");
document.getElementById("mini_blocks").innerHTML = "";
for (var i = 0; i < docs.length; i++) {
\t var object = docs[i];
\t printMini(object.id, object.arrived, object.booked, object.verification, object.org, object.price, object.stax, object.pic);
\t console.log(i);
}
console.log("DONE!");
}
printMini = function(id, arrived, booked, verification, org, price, stax, pic) {
if (verification != "-") {
\t // So that no string is empty
\t if (id == "") { id = "-"; }
\t if (arrived == "") { arrived = "-"; }
\t if (booked == "") { booked = "-"; }
\t if (verification == "") { verification = "-"; }
\t if (org == "") { org = "-"; }
\t if (price == "") { price = "-"; }
\t if (stax == "") { stax = "-"; }
\t document.getElementById("mini_blocks").innerHTML += '<div class="mini" id="\'' + id + '\'" onclick="changeInfo(\'' + arrived + '\', \'' + booked + '\', \'' + verification + '\', \'' + org + '\', \'' + price + '\', \'' + stax + '\', \'' + id + '\'), getPDF2(\'' + id + '\')"> <div class="mini_header"> <table class="mini_table"> <tr> <td align="left"> <b>Inkommen</b> </td> <td align="right"> <b>ID</b> </td> </tr> <tr> <td align="left">' + arrived + '</td> <td align="right">' + id + '</td> </tr> </table> </div> <div class="mini_img"> <img src="data:image/jpeg;base64,' + pic + '"> </div> <div class="mini_footer"> <table class="mini_table"> <tr> <td align="left"> <b>Bokförd</b> </td> <td align="right"> <b>Verifikat</b> </td> </tr> <tr> <td align="left">' + booked + '</td> <td align="right">' + verification + '</td> </tr> </table> </div> </div>';
}
else {
\t document.getElementById("mini_blocks").innerHTML += '<div class="mini" id="\'' + id + '\'" onclick="changeInfo(\'' + arrived + '\', \'' + booked + '\', \'' + verification + '\', \'' + org + '\', \'' + price + '\', \'' + stax + '\', \'' + id + '\'), getPDF2(\'' + id + '\')"> <div class="mini_header2"> <table class="mini_table"> <tr> <td align="left"> <b>Inkommen</b> </td> <td align="right"> <b>ID</b> </td> </tr> <tr> <td align="left">' + arrived + '</td> <td align="right">' + id + '</td> </tr> </table> </div> <div class="mini_img"> <img src="data:image/jpeg;base64,' + pic + '"> </div> <div class="mini_footer2"> </div> </div>';
}
}Проблема:
Это, однако, очень медленно и занимает свыше 45 секунд, чтобы закончить. Там, кажется, что это имеет отношение к линии:
document.getElementById("mini_blocks").innerHTML += '<div'>;
... как это занимает больше времени и больше времени для дивы будут созданы. Первые 10 divs создаются в течение первой секунды, но ближе к концу происходит около одного div, созданного за секунду. Он становится все медленнее и медленнее.
Этот GIF показывает первые несколько секунд процесса и при каждом DIV делается: GIF
Я попытался (заметьте + знак перед =) document.getElementById("mini_blocks").innerHTML += '<div>'
... который намного быстрее, он делает то же самое, но заменяет все предыдущие div, так что я получаю только один div. Это почти мгновенно!
Я также заметил, что ни один из divs не появляется до тех пор, пока все divs не будут выполнены, и я не знаю, почему.
Актуальные вопросы:
- Есть ли что-то, что делает + = метод медленно при создании дивы?
- Есть ли причина, по которой ни один из divs не появляется до самого конца?
- Я новичок в веб-программировании. Есть ли лучшие способы сделать то же самое?
Если это так медленно - почему бы вам не сохранить строку сначала (используя глобальную переменную) и установить только '.innerHTML' после завершения цикла? – freefaller
Я чувствую себя глупо, что не пробовал это самостоятельно. Благодаря! – Logic