Lazy load mathjax

105 views
Skip to first unread message

Ramakrishna Salagrama

unread,
Oct 3, 2021, 5:16:57 AM10/3/21
to MathJax Users
I liked the idea of mathjax lazyload. I tried and it is fast.  The only problem is the equations are rendering when in view port which is reducing user experience. If the equations are getting rendered when 500 px plus below the view port, then it would be fine especially on mobiles as the page is really lengthy. Is there anyway, that can be adjusted?

Davide Cervone

unread,
Oct 9, 2021, 9:13:59 AM10/9/21
to mathja...@googlegroups.com
I liked the idea of mathjax lazyload. I tried and it is fast.  The only problem is the equations are rendering when in view port which is reducing user experience. If the equations are getting rendered when 500 px plus below the view port, then it would be fine especially on mobiles as the page is really lengthy. Is there anyway, that can be adjusted?

Here is a configuration that does what you ask.  It adds a 500px margin around the viewport so that expressions will be typeset when they enter a 500px border around the viewport.  See if that does what you want.

MathJax = {
  loader: {
    load: ['ui/lazy']
  },
  startup: {
    ready() {
      //
      // Adjust the lazy observer to have a margin of 500px so expressions
      //   will be typeset a little when they are still a little bit away from being seen.
      //
      MathJax.startup.extendHandler(handler => {
        handler.documentClass = class extends handler.documentClass {
          constructor(...args) {
            super(...args);
            this.lazyObserver = new IntersectionObserver(this.lazyObserve.bind(this), {rootMargin: '500px'});
          }
        };
        return handler;
      }, 100);
      //
      // Do the regular startup.
      //
      MathJax.startup.defaultReady();
    }
  }
};

If it works, let me know and I can consider adding a feature to allow this.

Davide

Adenu Martins

unread,
Dec 8, 2021, 12:20:06 AM12/8/21
to MathJax Users
Hey Davide, i got here by accident but you just saved my life lol

Also, thanks  ramakrishn, thats exactly what I was looking for.

Ramakrishna Salagrama

unread,
Mar 13, 2022, 1:01:10 AMMar 13
to MathJax Users
Seems I committed a mistake somewhere.  This code is not working. Any suggestions.

window.MathJax = { startup: { typeset: false, }, loader: { load: ['ui/lazy'] }, startup: { ready() { // // Adjust the lazy observer to have a margin of 500px so expressions // will be typeset a little when they are still a little bit away from being seen. // MathJax.startup.extendHandler(handler => { handler.documentClass = class extends handler.documentClass { constructor(...args) { super(...args); this.lazyObserver = new IntersectionObserver(this.lazyObserve.bind(this), {rootMargin: '500px'}); } }; return handler; }, 100), tex: { inlineMath: [["$","$"],["\\(","\\)"]] }, svg: { matchFontHeight: false, scale: 0.9 }, options: { renderActions: { addMenu: [], checkLoading: [] }, ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' }, startup: { ready: function () { var SVG = MathJax._.output.svg_ts.SVG; var percent = MathJax._.util.lengths.percent; SVG.prototype.setScale = function (node) { if (this.options.scale !== 1) { this.adaptor.setStyle(node, 'fontSize', percent(this.options.scale)); } } MathJax.startup.defaultReady(); } } }; (function () { var script = document.createElement('script'); script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js'; script.async = true; document.head.appendChild(script); })();



Davide Cervone

unread,
Mar 13, 2022, 11:13:23 AMMar 13
to mathja...@googlegroups.com
Because the MathJax configuration block is a javascript object, you should only have one instance of each key in the object, otherwise only the last one will be used (and the others will be dropped).  You seem to have three separate startup sections, which means only the last one will have any effect.  Also the second one is not closed properly, so you should be getting an error in the console window indicating that there is a syntax error in your configuration object.  For example, in Firefox, I see "SyntaxError: unexpected token: ':'".  That should alert you to the fact that the configuration is not a valid object.

You will need to combine your startup sections into a single one.  Also, the matchFontHeight has been removed from the SVG output renderer, since it doesn't affect the output.

Try:

window.MathJax = {
  loader: {
    load: ['ui/lazy']
  },
  tex: {
    inlineMath: [["$","$"],["\\(","\\)"]]
  },
  svg: {
    scale: 0.9
  },
  options: {
    renderActions: {
      addMenu: [],
      checkLoading: []
    },
    ignoreHtmlClass: 'tex2jax_ignore',
    processHtmlClass: 'tex2jax_process'
  },
  startup: {
    typeset: false,
    ready: function () {
      var SVG = MathJax._.output.svg_ts.SVG;
      var percent = MathJax._.util.lengths.percent;
      SVG.prototype.setScale = function (node) {
        if (this.options.scale !== 1) {
          this.adaptor.setStyle(node, 'fontSize', percent(this.options.scale));
        }
      }
      //
      // Adjust the lazy observer to have a margin of 500px so expressions
      //   will be typeset a little when they are still a little bit away from being seen.
      //
      MathJax.startup.extendHandler(handler => {
        handler.documentClass = class extends handler.documentClass {
          constructor(...args) {
            super(...args);
            this.lazyObserver = new IntersectionObserver(this.lazyObserve.bind(this), {rootMargin: '500px'});
          }
        };
        return handler;
      }, 100);
      MathJax.startup.defaultReady();
    }
  }
};
(function () {
  var script = document.createElement('script');
  script.async = true;
  document.head.appendChild(script);
})();

and see if that works.

Davide


-- 
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/27557c30-42da-4551-9471-af777140f0e3n%40googlegroups.com.

Ramakrishna Salagrama

unread,
Mar 14, 2022, 4:38:50 AMMar 14
to MathJax Users
I used the same code but math is not rendering. No idea.

Davide Cervone

unread,
Mar 14, 2022, 10:49:36 AMMar 14
to mathja...@googlegroups.com
Your configuration includes "typeset: false" in the startup section (because that was in your original configuration with the three startup sections).  That means no initial typesetting is performed, and you would have to call MathJax.typeset() or MathJax.typesetPromise() to get the typesetting to occur.

If you remove the "typeset:false", then it will typeset as soon as MathJax loads.

Davide


Ramakrishna Salagrama

unread,
Mar 15, 2022, 9:47:42 AMMar 15
to MathJax Users
I tried this. But no avail.
Regards
Ramakrishna

Davide Cervone

unread,
Mar 22, 2022, 7:59:34 AMMar 22
to mathja...@googlegroups.com
The file you link to seems to be a regression to early mistakes.  You have two startup blocks, for example, and one of them is not complete, so you should be getting an error message in the browser console.  Are you checking the console for messages?  

Try taking your earlier mj_svg_lazy4.js file and just remove the "typeset:false," line.  That's it, nothing more.

Davide

Murray

unread,
Apr 21, 2022, 1:57:07 AMApr 21
to MathJax Users
I took Davide's idea one step further and only load MathJax if the user scrolls down to where some math exists on the page. This means other elements can load and render without having to fight with MathJax for attention during the initial page load.

Here's an example page.


If you follow along in the console as you scroll down, about 1/4 of the way down the page MathJax will load, and then processes the math that is just about to come into view.

As you continue to scroll down, MathJax only processes elements that are about to come into view.

This also works if:
  1. There is math on the screen "above the fold" (in view) on page load. (MathJax loads immediately)
  2. The user starts at the bottom (where there is no math) and scrolls up.
Hope it helps someone.

Regards
Murray
Reply all
Reply to author
Forward
0 new messages