Lazy Loading Images breaks M-Chart Highcharts

Using “view source” in Chrome I can see where the “lazyload” class has been applied to the Alabama chart, right before “src=’data:image”, and also that it’s not applied to the California charts. Interestingly, on the Alabama page, the chart src is “data:image/svg+xml” whereas on the California page, it’s data:image/png;base64. Guessing that has something to do with it being allowed to render fully.

This brings up a larger problem: how to restrict lazy loading for images that are not already assigned a class. Earlier today, I noticed the logo in my mobile menu header bar was lazy loading and tried to restrict it but found that the mobile menu plugin author didn’t give the logo png a class, so I couldn’t stop it from lazy loading.

• This reply was modified 5 years, 7 months ago by benspr.

Morning Ben;
I compared the California with the Alabama page and the highcharts work on neither of them for me I’m afraid, I see rocketLoader errors;

Uncaught SyntaxError: Unexpected identifier
at t.activateScript (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at t.run (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)
VM36:2 Uncaught TypeError: $(…).stick_in_parent is not a function
at <anonymous>:2:38
at <anonymous>:3:7
at t.activateScript (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at t.run (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)
VM37:3 Uncaught TypeError: $(…).stick_in_parent is not a function
at <anonymous>:3:31
at <anonymous>:4:11
at t.activateScript (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at t.run (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)
VM46:3 Uncaught TypeError: $(…).stick_in_parent is not a function
at <anonymous>:3:41
at <anonymous>:5:15
at t.activateScript (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at t.run (rocket-loader.min.js:1)
at rocket-loader.min.js:1
at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)

I’d be happy to investigate, but you might need to disable rocketloader?

Regarding data:image/svg+xml vs data:image/png;base64 the first one could be an Autoptimize lazyload placeholder, the 2nd one is from another lazyload solution. I indeed see reference to “easylazyloader” on both pages, so you might have to disable that one to make sure there’s no interference?

I tried adding the highcharts SVG class “highcharts-root” to the exemption box on the images tab in Autoptimize, but that didn’t work.

Excluding the class of a higher up div (node) will not work, the exclusion string has to match filename or class of the <img tag. I had a look at the HTML source (view-source to see the static HTML as sent by the server, not in the browser inspector which shows the “live” HTML as altered by JS) but the highchart-containing div seems emtpy (guess it’s populated by the highcharts JS).

how to restrict lazy loading for images that are not already assigned a class.

If you can’t exclude by class, you can also use part of the image filename, e.g. sprlogogood.png

have a nice day!
frank

Well I’ve turned off Rocket Loader and Easy Lazy Loader, cleared all cache and Cloudflare and verified: the charts load in Firefox, Edge, and Chrome on Win 10 machine when I have Autoptimize Lazy Loading off, and are broken when I turn it on.

You should be able to see that live on the site now, though I need to change the setting back to give my users a better experience soon.

BTW- thanks for reminding me that filenames can be excluded from lazy loading. That did the trick.

OK, can you try adding data:image/png to the lazyload exclusion list?

Fingers crossed, but that seems to have done the trick!

Great, I added data:image/ to the default lazyload exclusions earlier today, that will ship as part of AO25.1.

thanks for raising this point!