NO BUG: Shortcode images not loading within infinite scroll

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Nieuws - Hallo Buurman & Video - Hallo Buurman i.e.
Video: CleanShot 2025-05-06 at 15.34.36 · CleanShot Cloud
Relevant tools:

  • Bricks builder 1.12.4
  • WP Grid Builder 2.1.4
  • WP Grid Builder - Bricks 1.3.4
  • DearFlip (dlip) (Premium) 2.3.58

Hi! I have a page with a query loop with items. On this query loop, I use an infinite scroll. In the query loop, I built the item with basic elements like heading, text, etc. One thing that is different is that I am using a shortcode element. In this shortcode element, lies a DearFlip shortcode that represents a file. Without using the infinite scroll function, it shows the ‘cover’ image perfectly, no issues. When using infinite scroll, it does not show the ‘cover’ image.

Please advice! Thanks in advance!

2

Hi Brian,
Thanks so much for your report!

As far as I can see, DearFlip uses JavaScript that only executes when the page is loaded, not during or after the load more. Please get in touch with the plugin developer to get this sorted. If he needs further assistance, he can, of course, contact us via email.

Best regards,
timmse

1 Like
3

Hi @timmse, thanks for the reply and looking into it. I’ll contact DearFlip. If any update, I’ll post here as well.

Again thanks!

1 Like
4

Hi @timmse , I got the following reply:

In Proper Ajax call we do add:

DFLIP.parseBooks()

that runs as soon as the script output is added.

You can also call that function after the content is loaded. If the script execution doesn’t happen.

Looks like the script is never executed.

What is creating the infinite scroll? Maybe ask them if there is any issue with the execution of scripts added in infinite scroll.

So, I am confused at this point haha.

5

Hey Brian,
Ok, no problem. You can use custom Ajax events to fix the problem.

Add this to the footer scripts of your template:

document.addEventListener('bricks/ajax/load_page/completed', (event) => {
 DFLIP.parseBooks()
});

This should work theoretically. If it causes errors in the console, you can also add the queryID check (see the academy article at “ajax filter event sequence”).

1 Like
6

@timmse Thanks for providing the solution! This works like a charm.