Datatables loads very slowly when each row has an iframe
Datatables loads very slowly when each row has an iframe
globalplane
Posts: 70Questions: 12Answers: 0
Link to test case: https://comprehensibleinputwiki.org/wiki/Chinese/Library
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I have a table with 222 rows of six columns, which is all created server-side. Each row has an iframe in one of the columns. Datatables is slow to load, and is worse the more rows there are. On LibreWolf browser, it takes about 9 seconds with iframes. If I remove the iframes (see here) it takes less than a second. On mobile, it's at least twice as long to load.
I tried to use the Debugger, but I had to first use an extension to disable the site's CSP. And after that, when I clicked Upload, it just gave an alert: A JSON parsing error occurred.<br>Please report to support with a link.
Anyone know how this can be sped up?
Here is the JS I use to load Datatables:
$(document).ready( function () {
// Create <thead> for DataTables to work
var header = document.getElementById('library').createTHead().id = 'lib-thead';
jQuery('#lib-header').detach().appendTo('#lib-thead');
// Activate DataTable
var waitForDT = setInterval(function () {
if (typeof $('#library').dataTable === 'function') {
$('#library').dataTable( {
"columnDefs": [
{ "orderData": 4, "targets": 2 }
]
} );
clearInterval(waitForDT);
}
}, 10);
});
This question has an accepted answers - jump to answer
Answers
I think it might be because Mediawiki has to do a lot to load those iframes before it starts up the javascript. If so, it's unrelated to Datatables, and I'm not sure if there's a way around it.
Ok, someone from the Mediawiki Discord figured out a fix. Have all of the iframes inside of a div that is display:none, then use javascript to unhide it, so the javascript can start before the iframes begin to load.
This section of the FAQ should help, it discusses various techniques to improve performance.
deferRenderwould almost definitely help with,Cheers,
Colin
Thanks. Fortunately the developers of the Mediawiki extension I'm using updated their code to no longer create any of the hundreds of iframes until a user clicks one. It works very quickly now.