rocket loader breaking onload JS on linked CSS

  • Resolved Optimizing Matters

    (@optimizingmatters)


    7 years, 3 months ago

    Hi colleagues, I’m Frank, author of Autoptimize.

    I pushed out a new release 2 days ageo, which includes Filamentgroup’s loadCSS solution to load the CSS in a deferred manner. The basis of this is e.g.;

    
<link rel="preload" as="style" media="all" href="https://somesite.com/wp-content/cache/autoptimize/css/autoptimize_d97be2d1e59fda6be542613822904ed1.css" onload="this.rel='stylesheet'" />

    Now when rocketloader is active, the onload handler’s JS gets (badly) broken.

    -> so can I prevent that somehow on my side (similar to the data-cfasync='false' for script tags)?
    -> or can you from your side fix this somehow (given the popularity of Filamentgroup’s loadCSS this is bound to happen more then just for Autoptimize users)

    Kind regards,
    frank

Viewing 10 replies - 1 through 10 (of 10 total)
  • jwineman

    (@jwineman)

    7 years, 3 months ago

    Hi Frank,

    Correct, you can prevent rocket loader from executing by adding data-cfsync=false to the tag.

    Thanks,
    John

    Thread Starter Optimizing Matters

    (@optimizingmatters)

    7 years, 3 months ago

    even if the tag isn’t a <script src=, but <link href= ?

    jwineman

    (@jwineman)

    7 years, 3 months ago

    Ah I understand. Let me check and get back to you.

    Thread Starter Optimizing Matters

    (@optimizingmatters)

    7 years, 3 months ago

    sure 🙂

    Thread Starter Optimizing Matters

    (@optimizingmatters)

    7 years, 3 months ago

    any news on that topic @jwineman? 🙂

    jwineman

    (@jwineman)

    7 years, 3 months ago

    Hey,

    Here is a quote from one of the engineers on rocket loader:

    Rocket Loader doesn’t handle link tags in any special way, so there’s no need to insert the “data-cfasync” tag on them. The JavaScript that inserts them, however, is effected by Rocket Loader; that JavaScript does need the “data-cfasync” tag added in the HTML.

    As for JavaScript handlers defined inside the HTML: there’s no way to disable their rewriting when Rocket Loader is enabled, though the rewriting shouldn’t effect the outcome (this should still be referencing the specific element).

    Rocket Loader is in beta, so there may be edge cases it doesn’t handle well, so you may wish to notify site owners to disable Rocket Loader when using the Autoptimize plugin.

    To summarize Rocket Loader isn’t set up to handle <link/> (like you probably assumed). Unfortunately the solution here is to advise your customers to disable Rocket Loader.

    Thread Starter Optimizing Matters

    (@optimizingmatters)

    7 years, 3 months ago

    thanks for the feedback @jwineman.

    is there a constant, filter, action, function or object I can check for to determine if rocketloader is active?

    jwineman

    (@jwineman)

    7 years, 3 months ago

    When Rocket Loader is enabled you’ll see code similar to below injected:
    `
    //<![CDATA[
    try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:”cf”,bag2:1,mirage2:0,oracle:0,paths:{cloudflare:”/cdn-cgi/nexp/dok3v=1613a3a185/”},atok:”3c8da9a49931c38883a0304d96c6c413″,petok:”2a5b4cfaa309d7067a77dfba4e5c5caabbbe8872-1498583646-1800″,zone:”[DOMAIN.COM]”,rocket:”a”,apps:{}}];document.write(‘<script type=”text/javascript” src=”//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=85b614c0f6/cloudflare.min.js”><‘+’\/script>’);}}catch(e){};
    //]]>
    `
    You should be able to check for the existence of window.CloudFlare. <script> tags will also have data-rocketsrc="" or type="text/rocketscript" appended to them.

    Thanks,
    John

    jwineman

    (@jwineman)

    7 years, 3 months ago

    We omit wp-admin/ urls from rocket loader by the way.

    jwineman

    (@jwineman)

    7 years, 3 months ago

    Resolved.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘rocket loader breaking onload JS on linked CSS’ is closed to new replies.