move js to head and optimize for loading speed

This commit is contained in:
Nick Sweeting 2019-03-20 04:30:28 -04:00
parent c2ea90ed39
commit e4c7683983
2 changed files with 39 additions and 23 deletions

View file

@ -116,7 +116,38 @@
/*body[data-status~=running] .in-progress {
display: inline-block;
}*/
tr td a.favicon img {
padding-left: 6px;
padding-right: 12px;
vertical-align: -4px;
}
tr td a.title {
font-size: 1.4em;
text-decoration:none;
color:black;
}
tr td a.title small {
background-color: #efefef;
border-radius: 4px;
float:right
}
</style>
<link rel="stylesheet" href="static/jquery.dataTables.min.css"/>
<script src="static/jquery.min.js"></script>
<script src="static/jquery.dataTables.min.js"></script>
<script>
document.addEventListener('error', function(e) {
e.target.style.opacity = 0;
}, true)
jQuery(document).ready(function() {
jQuery('#table-bookmarks').DataTable({
stateSave: true, // save state (filtered input, number of entries shown, etc) in localStorage
dom: '<lf<t>ip>', // how to show the table and its helpers (filter, etc) in the DOM
order: [[0, 'desc']],
iDisplayLength: 100,
});
});
</script>
</head>
<body data-status="$status">
<header>
@ -161,18 +192,5 @@
</center>
<br/>
</footer>
<link rel="stylesheet" href="static/jquery.dataTables.min.css"/>
<script src="static/jquery.min.js"></script>
<script src="static/jquery.dataTables.min.js"></script>
<script>
jQuery(document).ready(function() {
jQuery('#table-bookmarks').DataTable({
stateSave: true, // save state (filtered input, number of entries shown, etc) in localStorage
dom: '<lf<t>ip>', // how to show the table and its helpers (filter, etc) in the DOM
order: [[0, 'desc']],
iDisplayLength: 100,
});
});
</script>
</body>
</html>

View file

@ -1,18 +1,16 @@
<tr data-url="$url">
<td title="Bookmarked timestamp: $timestamp">$bookmarked_date</td>
<td style="text-align: left">
<a href="$link_dir/$index_url" title="Link Index">
<img src="$link_dir/$favicon_url" onerror="this.style.opacity=0" class="link-favicon">
</a>
<a href="$link_dir/$archive_url" style="font-size:1.4em;text-decoration:none;color:black;" title="$title">
<tr>
<td title="$timestamp">$bookmarked_date</td>
<td style="text-align:left">
<a href="$link_dir/$index_url"><img src="$favicon_url" class="link-favicon" decoding="async"></a>
<a href="$link_dir/$archive_url" title="$title">
<span data-title-for="$url" data-archived="$is_archived">$title</span>
<small style="background-color: #eee;border-radius:4px; float:right">$tags</small>
<small>$tags</small>
</a>
</td>
<td>
<a href="$link_dir/$index_url">📄
<span data-number-for="$url" title="Fetching any missing files...">$num_outputs <img src="static/spinner.gif" class="files-spinner"/></span>
<span data-number-for="$url" title="Fetching any missing files...">$num_outputs <img src="static/spinner.gif" class="files-spinner" decoding="async"/></span>
</a>
</td>
<td style="text-align: left"><!--🔗 <img src="$google_favicon_url" height="16px">--> <a href="$url">$url</a></td>
<td style="text-align:left"><a href="$url">$url</a></td>
</tr>