Inline style/script
The JS & CSS code is inserted directly into the page through tags <style
<script
(not src attr) called inline.
You can modify it's content before it executes on the browser. Use the hook hpp_inline_script
hpp_inline_style
as bellow:
Each JS file allows you to add inline JS by the function wp_add_inline_script
, these inline code from all JS files will group into a single <script tag & placed at the bottom of the page. You can also modify each inline code like this:
Lazy script
Almost Inline scripts depend on other library such as jquery so to work without issue these inline code will be fired only after all JS files have complete execution. Hence they need to delay a few milliseconds, and you can see it nested in the event _HWIO.readyjs
However, if your website has some variables that need to be shared for other scripts to use, So you will have to open global for that variable. There are 2 ways to do this: create global variables with window.
using the filter hpp_inline_script
OR remove the event _HWIO.readyjs
Method 1: using the filter to replace string from var something=
towindow.something=
Method 2: removing the wrap event 'readyjs' , by adding blacklist text that found in <script tag you want to remove this event.
By default, entire inline scripts are run after the document ready, if you want to specific which inline code should run only after the user interacts on the web (ex: scroll, mouse move, click..) so see the below example.
With the above snippet, help you create the readyjs event has form of: _HWIO.readyjs(null,function(){});
Last updated