Add page loaded flag

ernestobellei

Hi,

It would be useful to have a flag (es a class / meta 'is-loaded') when ajax / DOM loading ends.

Thanks you,
Ernesto

mariusjopen

Dear @ernestobellei

sure. I will check with Armin about that.

Best!

Marius

arminunruh

You mean a html class that is added?

Maybe the body gets a html class: loading, loaded

Do you want to style your website according to loading?

ernestobellei

Hi, @arminunruh

Sorry for the delayed answer but I missed the notification :))

I wrote a marquee shortcode for WordPress and I would like to init it as soon as the DOM is loaded (even using Ajax). By now I’m using a mutation observer that listens on DOM add/change events and detect whether the shortcode HTML has been loaded, but checking for a class would be a lighter and cleaner solution.

Having a .loaded class (or data-attribute) would be useful to avoid double check for mobile and desktop layout gridder too.

Best,
Ernesto

arminunruh

Sure, good point!

ernestobellei

Hi @arminunruh and @mariusjopen,

Any chance to have this class implemented?
p.s. thanks for the shortcode fix :))

Best,
Ernesto

mariusjopen

Hi @ernestobellei
I will check back with Armin.

Best!

Marius

arminunruh

Maybe because #grid has overflow:hidden; and that is why it doesn't work.

http://dinbror.dk/blog/help-css-position-sticky-doesnt-work-solved/

in your custom css write:

#grid{
overflow: auto;
}

ernestobellei

Hi @arminunruh ,

I don't understand your answer :))
Is it about the loaded class?

Best,
Ernesto

mariusjopen

Hi @ernestobellei
I will check back with Armin.

Best!

Marius

arminunruh

Whoops,

Sorry.

I think you are looking for something like:

<script>
window.addEventListener('popstate', function(){
jQuery('body').removeClass('page-loaded');
});
window.laytheme.on('newpageshown', function(){
jQuery('body').addClass('page-loaded');
});
</script>

Add this to lay options -> Custom <head> content