OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 Fixed card scripts executing before DOM is parsed

Browse Source 
no-issue

Using the async attribute means that the script is downloaded in
parallel with the parsing of the html into DOM, and then executed upon
completion. This means that the script cannot be sure that particular
parts of the DOM exist as it may not have finished parsing. This has
resulted in bugs with the new toggle card not working.

Switching our script to use the defer attribute means that the script is
still downloaded in parallel with parsing, but it is not executed until
parsing is complete. This means that the script can safely access the
DOM.
This commit is contained in:
Fabien egg O'Carroll 2021-12-08 17:46:03 +02:00
parent daed6f53fb
commit 55d7176e51
1 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/frontend/helpers/ghost_head.js
View File

@ -199,7 +199,7 @@ module.exports = function ghost_head(options) { // eslint-disable-line camelcase
// @TODO do this in a more "frameworky" way
if (cardAssetService.hasFile('js')) {
head.push(`<script async src="${getAssetUrl('public/cards.min.js')}"></script>`);
head.push(`<script defer src="${getAssetUrl('public/cards.min.js')}"></script>`);
}
if (cardAssetService.hasFile('css')) {
head.push(`<link rel="stylesheet" type="text/css" href="${getAssetUrl('public/cards.min.css')}">`);