Блог

Главная - Вопросы по программированию - Загрузка CSS в loadUrl перед DOM

Загрузка CSS в loadUrl перед DOM

#javascript #electron

#javascript #electron

Вопрос:

Я хочу знать, как я могу загрузить css на веб-сайт до его загрузки. Я попробовал приведенный ниже код в main.js 

 win.webContents.on('did-start-loading', function () {

        fs.readFile(__dirname   '/home.css', "utf-8", function (error, data) {
            if (!error) {
                var formatedData = data.replace(/s{2,10}/g, ' ').trim()
                    win.webContents.insertCSS(formatedData)
            }
        })
    })

Это сработало, но оригинальный стиль веб-сайта появился на несколько секунд, а затем он загрузил мой стиль, что не имеет никакого смысла, если исходный CSS и мой получили совершенно другой стиль.

Я также попытался загрузить CSS ниже в preload.js 

 window.addEventListener("DOMContentLoaded", injecting)
function injecting() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://example.com/hello.css';
    document.documentElement.appendChild(link);
}

Это также не сработало. Он продолжает показывать оригинальный стиль, а затем загружает мой css через секунду.

Ответ №1:

Вы не можете контролировать скорость загрузки CSS, но вы можете добиться аналогичного поведения. Вы могли бы иметь body как:

 <body class="invisible">
    <!-- Some HTML here -->
</body>

и некоторые полезные CSS

 .invisible {
    display: none;
}

Теперь вы могли бы сделать

document.body.className = ""; как только CSS будет загружен как:

 window.addEventListener("DOMContentLoaded", injecting)
function injecting() {
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://example.com/hello.css';
    link.onload = (() => {document.body.className = "";});
    document.documentElement.appendChild(link);
}

Комментарии:

1. Но дело в том… Я использую loadUrl и у меня нет контроля над веб-сайтом или HTML

2. @jeputier Я понимаю. В этом случае вы можете добавить document.body.display = «none» в качестве первой операции, которую вы выполняете, и document.body.display = «block»; после загрузки ссылки.

3. Я сделал то, что вы сказали, и это не сработало… Не могли бы вы обновить свой вопрос правильным способом?

4. @jeputier как это не сработало? Вы получили какие-то ошибки в консоли? Вы также можете создать JSFiddle с вашей проблемой (в любом случае, это в основном проблема Javascript). Если вы это сделаете, нам будет легче обнаружить и устранить точную проблему.

5. Я действительно не знаю, что такое «JSFiddle» также, это не дало никаких ошибок. Это сработало, но он по-прежнему показывает исходный веб-сайт в течение секунды, а затем переключается на мой. Плюс тег body в html даже не имеет никакого класса…