Preloader behavior and customization

This described preload issue was present long before the lazy loading implementation and is in no way exclusively relative to that. Instead its relative to the way things are managed in the setup and structure that Blocs has in place regarding the preloader logic. I remember it being discussed back in 2016 (Blocs 2) and the logic was slightly changed from the original since that thread. But the same overall issue still remains 4 years later on Blocs sites that I’ve seen.

This is likely to be caused by a broken Jquery link.

It (Jquery) was updated a few versions back, so if a user exports and only replaces part of the site, it may point to a newer version of Jquery which is not present on the server of the site as it’s just a partial update.

There is a subclass for setting the pre-loader background colour, you can read up here.

Hi @Norm
Thanks for your replies,
great app BTW :slight_smile:
Well, I’ve already tried to export the whole website, and I’ve got the latest version of blocs…

Thanks for the subclass tip, haven’t seen it before…but without apreloader loading issue, I won’t use it.

What is the problem you have exactly with the pre-loader?

Is it still this?

Attached zip holds what I see with the OP’s web site on Firefox. It shows the problem with preloader that occurs. Perhaps OP should send Norm his project file after creating a bug report? Btw, I mostly turn off preloader for my web sites, but I do have one that it is on and I do not see the issue.

pruthe

Screen Recording 2020-09-21 at 8.42.08 AM.mp4.zip (1.5 MB)

1 Like

ah ok, thanks that was helpful :+1:

@doud Blocs 3.5.4 has a patch in it to prevent the site flashing for a split second before the pre-loader shown.

Export with 3.5.4 and give it a try you should get better results now.

@pruthe thanks for the screen grab, and the explanation… I still have to improve my English :wink:
@Norm ok cool, that’s exactly the point, I’ll only able to test it by the end of the week, I’ll give you a feedback then !

1 Like

What did you determine, have you tried yet?

SOLVED !

@Blocs_User Everything is solved :slight_smile:
@Norm Thanks for the update, the split second flash disappeared, perfect.
@hendon52 Putting the subclass Preloader background in the subclass manager made my background black, just nice.

Thanks everyone !

1 Like

Marvellous news for a Monday morning :grinning:

1 Like

@doud Thats good to hear, I hope it finally is.

@Norm Its good to see you finally moved the “page-loading-blocs-notifaction” from above the closing body tag to under the opening body tag and above the "page-container” as I discussed 4 years ago. ;–)

If this issue that has long effected Blocs sites which used the preloader is now finally resolved, then it should wisely be made known to all Blocs users. So they can choose to re-export and re-upload their sites to likewise resolve this preload issue. Since it made sites look rather error prone and unprofessional with this long standing issue across many versions and years.

2 Likes

I just tried to open the site and got stuck on the preloaded for nearly 30 secs. I then reloaded the page twice before it actually turned visible.

Same here @pumpkin

@pumpkin @TrevReav

:thinking: It worked fine here for me (in Chrome and Firefox) but doesn’t appear to work now in Safari at least on first load.

I’ll take a look now and see what is up.

Update 1

I’ve set up a test site and this version of the pre-loader works fine in (Chrome,Safari and Firefox).

So the code Blocs generates appears to work correctly, but something on @doud site is tripping up Safari. I’ll continue to look for the cause. It may be a custom Bric or something additional added to the page.

Update 2
Just checking the log and there are a few warnings and errors.

  1. A Vimeo video that is throwing a 403 error.
  2. Some warnings about dmp.vendor using deprecated calls.

Maybe one of these is blocking Safari from completing the load event which clears the pre-loader.

Update 3
I’ve just added a fallback to help protect the pre-loader from 3rd party code errors. The fallback is written in CSS so its not dependent on Javascript and is triggered after 2 seconds. This should prevent issues like this in future.

The patch will be included in beta build 3 of Blocs 3.5.5.

@doud I’ve sent you a DM as getting my hands on the Blocs project would be great to track down the exact cause. Due to the fact, standard Blocs code works in Safari (see update 1), it’s making me suspect the problem is coming from 3rd party code used on the site.

Hi there,
thanks @pumpkin @TrevReav @Norm for your attention.

Indeed, sometimes it’s OK in Safari, sometimes not. And OK in Chrome (but no split second flash, and a great black background :slight_smile:)
I’m using these 2 extensions : “Follow Links (1.0.2)” and "Owl Caroussel (1.2.1) »

As you understood, I know almost nothing in code, really don’t know what’s under the hood…

I’ve actually sent a package of my project to Norm.

Wait and see…

1 Like

No problem, glad I can help.

I’ve just released beta build 3 of 3.5.5 that includes the additional pre-loader fallback patch.

https://forum.blocsapp.com/t/blocs-3-5-5-beta-build-3/11810

As this is a beta release, I would recommend you export and test your project before you push the changes into production. If that is not an option and you can’t wait for the dust to settle on the testing. What you could do is simply change out the files that are effected on your server, to see if the patch addresses the issue.

Here’s how:

  1. Export your project with 3.5.5 build 3.
  2. Open the export directory Blocs just created and locate the file style.css and the index.html page.
  3. On your server you will also find these two files, rename both style-backup.css and index-backup.html.
  4. Now you have renamed the original two files on the server move the newly generated files from Blocs (style.css and index.html) onto the server in place of the originals.
  5. Let us know when you have done it and we can all test it.

Backup
If the problem is not rectified, to revert your site back, simply remove the newly added style and index files from the server and rename the originals back to style and index (remove -backup from the file name). Doing this will force them to take their original place in the loading process.

I hope that helps.

1 Like

@Norm is just the fastest developer I’ve ever seen.
I’ll backup and test it right now.

1 Like

@Norm
Thanks for the Beta.

The preloader seems much quicker, nice !

…something is now wrong with my « Scroll FX » Fade in… Brics are visible, No fade… until a first refresh… The accordion’s first opening seems not animated (after two clicks, it’s ok…)
Preview mode inside Blocs or exported&online website are doing the same.

1 Like

I think this is caused by the fact the javascript in Safari is tripping up at some point. Because the pre-loader is now removed after 2 seconds regardless, its showing the state of the page which is held because the JS is not being fully executed - (Scroll FX use JS).

I have your project, so I’ll run a bunch of tests removing parts here and there until I find the cause.

1 Like