Preloader behavior and customization

Hi there !
Here is a new topic for gathering informations about preloader :

  • Any news for choosing a custom background color for preloader ? If so, is it possible to explain the class/code needed ? My website has a black background for example…

  • My whole website is first appearing for 0,5s, and THEN the preloader, and finally, the loaded website… Really strange, and not usable… Any ideas/workaround for this ?

Thanks !

I don’t see a pre-loader when entering your site. If you don’t want a preloader, just don’t include it. I often find that everything works quicker if you don’t use pre-loaders. Where a pre-loader may be useful is if you have a piece of large content (maybe a background video) in your site which can slow down the loading. At least with a pre-loader, visitors will know something is happening.

Pre-loaders take on the normal background colour so maybe you could add some styling code to your css, such as:
html { height: 100%; background-color: black; }

Thanks @hendon52 for this quick answer,
and sorry, I’ve deleted the preloader, because of the odd behavior…:stuck_out_tongue:
I’ve just replaced it, so you can see now what I’m talking about …

I understand, I was just thinking that it’s more comfortable. I’m not totally decided yet…

The background project is black, maybe I have to force it in css ? Can you implement it directly in Blocs ? (coding level 0…)

I think your pre-loader gets stuck - its all I see now. Have you checked that you’re not using lazy load as well as the pre-loader? That can sometimes cause issues.

Yes, I don’t use lazy load with the preloader…:confused:

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.


Screen Recording 2020-09-21 at 8.42.08 (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?


@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.


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.