Improved Asset Loading check if script is currently loading

  • Resolved aliboy1008

    (@aliboy1008)


    2 years, 11 months ago

    Good day!

    With the “Improved Asset Loading” feature

    some scripts are loaded not using the wp_enqueue_script function, like the swiper js

    how does the loading of these scripts work? how can I check if elementor is trying to load this file?

    I can check when it finishes loading by checking the “Swiper” in the js window object

    but how can I check while it is still loading, or trying to load it?

    The problem is the swiper js file would be loaded twice, since it is not using the wp_enqueue_script, it doesn’t know I already have the file loaded.

    I am now trying to load the swiper js via javascript (creating a script element and appending to body)

    I could add e setInteval that would wait for e few seconds until it attempts to load my own swiper js, but this might not be reliable as the load time of the elementor swiper js varies.

    Sometimes just 1 sec, sometimes up to 3 sec. There might be a better way?

Viewing 1 replies (of 1 total)
  • Joel

    (@joelsm)

    2 years, 11 months ago

    Hey there,

    Thank you for reaching out. 

    From your description, it appears that you’re experiencing issues with the Swiper JS library being loaded twice, once by your code and once by Elementor’s “Improved Asset Loading” feature. You can find more information about the loading method here:

    Optimized Asset Loading Mode
    Add JavaScript to Widgets

    Note: If you are an Elementor Pro user, please use our dedicated Pro support. To expedite assistance, kindly connect with us through your ‘My Elementor‘ account, and we’ll prioritize resolving your concern swiftly. Please note that as per WordPress.org guidelines, commercial product support isn’t provided on this platform. The information below is generic; I share it as I understand it is generic. 

    Currently, this only applies to Elementor Core widget handlers (JS files), and the Swiper library in Elementor and Elementor Pro instances. Pro widgets handlers will be added in a later Pro version.  3rd party addons may cause potential conflicts if they have not optimized their plugins to use this feature properly.

    1. Use a MutationObserver to watch for changes to the document’s <script> tags. When a new script is added, you can inspect its src attribute to see if it matches the Swiper library’s URL. When you dynamically load your Swiper version, ensure you’re not doing it if Elementor’s version is detected. This is where the MutationObserver method can come in handy.
    2. You can use readystatechange or load event listeners on the script tag to detect when Elementor’s Swiper JS finishes loading.

    Remember, when dealing with third-party assets, it’s essential to test thoroughly to ensure no conflicts or unintended behaviors, especially concerning user experience.

    I hope this helps. Thanks and have a wonderful day!

    Kind Regards,

    • This reply was modified 2 years, 11 months ago by Joel.
Viewing 1 replies (of 1 total)

The topic ‘Improved Asset Loading check if script is currently loading’ is closed to new replies.