Eine kurze Diskussion darüber, wie Atom die HTML-Echtzeitvorschau implementiert

AtomWie implementiert man eine HTML-Echtzeitvorschau? Der folgende Artikel stellt Ihnen die nativen und Plug-in-Methoden des Atom-Editors zur Implementierung der Echtzeit-HTML-Vorschau vor. Ich hoffe, er wird Ihnen hilfreich sein!

Atom-Editor implementiert HTML-Echtzeitvorschau

1. Native Implementierung

Drücken Sie Strg + Umschalt + M im Bearbeitungsfeld, um die native Vorschau zu öffnen. (Ohne CSS-Stil) Ctrl + Shift + M可以打开原生预览。（不带 CSS 样式）

2.插件 atom-html-preview 实现

点击 File->settings–>install-> 搜索 atom-html-preview -> 下载，在编辑框中按Ctrl + Shift + H 可以打开预览面板（带 CSS 样式）。【相关推荐：atom使用教程】

3. JavaScript window.onload

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 元素，在页面完全载入后(包括图片、css 文件等等)执行脚本代码。有多个要执行的函数语法：

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

在页面加载完成后依次执行 Func1、Func2、Func3,并只是执行一次。

4.window.requestAnimationFrame

window.requestAnimationFrame()

2. Plug-in-Atom-HTML-Vorschau-Implementierung

Klicken Sie auf Datei->Einstellungen–>Installieren-> Herunterladen, klicken Sie auf Bearbeiten Box Strg + Umschalt + H öffnet das Vorschaufenster (mit CSS-Stilen). [Verwandte Empfehlungen: Tutorial zur Atom-Nutzung

]🎜🎜🎜3. Die Methode onload🎜🎜🎜🎜window.onload()🎜 wird verwendet, um Vorgänge unmittelbar nach dem Laden der Webseite auszuführen, d. h. wenn das HTML-Dokument geladen wird, wird eine Methode sofort ausgeführt. 🎜🎜🎜window.onload()🎜 wird normalerweise für Elemente verwendet, um Skriptcode auszuführen, nachdem die Seite vollständig geladen ist (einschließlich Bilder, CSS-Dateien usw.). Es gibt mehrere auszuführende Funktionssyntaxen: 🎜rrreee🎜Nachdem die Seite geladen ist, führen Sie Func1, Func2, Func3 nacheinander aus und führen Sie es nur einmal aus. 🎜🎜🎜4.window.requestAnimationFrame🎜🎜🎜🎜window.requestAnimationFrame()🎜 Teilen Sie dem Browser mit, dass Sie eine Animation ausführen möchten, und bitten Sie den Browser, die angegebene Rückruffunktion vor dem nächsten Redraw-Update aufzurufen Animation. Diese Methode erfordert die Übergabe einer Rückruffunktion als Parameter, die vor dem nächsten Neuzeichnen des Browsers ausgeführt wird. 🎜🎜【Verwandte Empfehlung: „🎜Atom-Tutorial🎜“】🎜

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie Atom die HTML-Echtzeitvorschau implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!