Cloudflare rocket load + lazysizes + ajax content

[diffTed]

trafficstars

Lazysizes not working with Rocket Load turned on (CloudFlare). When I turn off rocket load - everything works as expected. data-cfasync="true" and data-cfasync="false" - not helping.

[diffTed]

so problem was - optinmonster. Now server CloudFlare Rocek Load runs Automatic setting on. Just added data-cfasync="false" to lazysizes and optinmonster - and everything works.

example of optinmonster code: http://codebins.com/bin/4ldqoxv

Is there anway workaround to get lazysizes working with CF Rocek Load?

[aFarkas]

Can you give me a full testcase, which shows, that it is not working?

[twidi]

I found the problem. Cloudflare seems to redefine getElementsByClassName in its rocket.js, so lazyloadElems is never updated, it contains exactly, and forever, the images with the lazyload class that existed when lazySizes.init() was called, even if lazysizes already loaded them!

document.getElementsByClassName.toSource()

gives:

(function (b,d,e,g,h){if(u.getActivated())return c.apply(f,arguments);try{return j[a].apply(f,arguments)}catch(i){return j[a](b,d,e,g,h)}})

so we loose the "live" feature of getElementsByClassName :(

PS: it seems that they do this for a lot of things

[twidi]

Oh that's not all. The result is then captured, and then, a list is specifically returned:

    capturedDocument.wrapNativeMethod('getElementsByClassName', function (b) {
      var c = capturedDocument.getNativeMethod('getElementsByClassName').call(a, b),
      d = [
      ];
      return f.forEach(c, function (a, b) {
        a && a.nodeName && 'script' == a.nodeName.toLowerCase() && (a = l.proxy(a)),
        d[b] = a
      }),
      d
    }),

The problem is here.

I created an issue on the Cloudflare size about this problem. For now I deactivated their rocket feature.

[aFarkas]

@twidi Nice work! About your findings, I'm just speechless.

[twidi]

It wasn't easy. I had the same problem as @TedAce but I cannot accept things that work then suddenly stop working in production. So I went through your script in debugging mode, step by step. At first, I forgot that getElementsByClassName was "live" so I didn't even understand how your script could work. It's your script behavior that told me to check about this "dynamic" feature, confirmed by a google search. Then I said myself "ok so I should have something that change this behavior". I didn't thought one single second that it could be rocket.js from CloudFlare. But when I checked it in the console, I saw the light :) I still had hard time to go through their script which is kind of obfuscated. Then everything was clear.

To let you know about my contact with CloudFlare:

• on twitter, one of their developer told me it was the first time someone mentioned this in 5 years ( https://twitter.com/twidi/status/721105454911328256 )
• on the support ticket, a support guy just told me:

Rocket Loader is considered Beta because it’s an experimental feature that modifies the loading and execution flow of Javascript. While efforts are taken to increase Rocket Loader’s compatibility with third-party Javascripts, not all scripts work with this feature.

I still think it's very bad to do this so I'll try to push them to correct their script to have the normal behavior.

One solution in the script I may made for myself, is to reload lazyloadElems at the begining of the checkElements function.

PS: it took me five minutes to write this post describing my finding, but a few hours to really go through the whole process ;)

[twidi]

Last news from the support ticket

Working with Marc on this we appreciate your feedback and are always trying to improve our system. Rocket Loader tries to mimic the functionality of http2's ability to load resources so in a sense it is being depreciated as http2 adoption becomes more relevant. However we are trying to improve rocket loader.

So if your expected public mainly uses recent browsers with spdy or http2 (like for me) rocket may be deactivated without losing anything.

[NyanKiyoshi]

Almost two years after... The bug is still in their rocket js... Thank you @twidi for your findings.

[neilscot]

I'm having this problem and need help. New site been working fine for 10 months, but at the beginning of this month images stopped loading. Web guy says lazysizes is blocking images when Cloudflare recaches and has switched off lazysizes. But that's making site slower. Does anyone have a work around for this? Is it better to switch off their rocket js?

[aFarkas]

If you read through this issue, you will realize that you should turn off rocket js. It is buggy and tries to solve things that are already solved.

If that isn't good enough I could provide a workaround, but it is a rocket js bug.