MathJax Equation Demo with delayed loading until visible

by keithphw

HTML

<script src="http://remysharp.com/downloads/jquery.inview.js"></script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;dummy=.js"></script>
<script src="http://remysharp.com/downloads/jquery.inview.js"></script>

<script>
// replace the mathjax start and end strings \[ and \] with \MJ[ and \MJ] to prevent MathJax from processing the maths. This is only done once.
$(function () {
    var attrKeyString = 'name';
    var attrValueString = 'MathJaxDivForLazyProcessing';
    var count = 0;
    $(document).find('div['+attrKeyString+']').each(function(index, element) {
        if ($(element).attr(attrKeyString) == attrValueString){
    var reStartMathJax = new RegExp('\\[', "g");        
    var reEndMathJax = new RegExp('\\]', "g");        
    var newHtml = $(element).html().replace(reStartMathJax, '\MJ[');
            newHtml = newHtml.replace(reEndMathJax, '\MJ]');
    //if (count % 10 == 0){alert('new newHtml == '+newHtml);}
    //count += 1;
            $(element).html(newHtml);
        }
    });
});

// Find the div's marked with the attribute key 'name' and value 'MathJaxDivForLazyProcessing'. Associate those div's with with Remy Sharp's 'inview' plugin. This function is only executed once which is when the div is in the viewport.
$(function () {
    var attrKeyString = 'name';
    var attrValueString = 'MathJaxDivForLazyProcessing';
    var count = 0;
    $(document).find('div['+attrKeyString+']').each(function(index, element) {
        if ($(element).attr(attrKeyString) == attrValueString){
            
            $(element).one('inview', function (event, visible) {
                if (visible) {
    var reStartMathJax = new RegExp('\\\\MJ\\[', "g");        
    var reEndMathJax = new RegExp('\\\\MJ\\]', "g");   
    var elementHtml = $(element).html();
    var containsStart = reStartMathJax.test(elementHtml);
    var containsEnd = reEndMathJax.test(elementHtml);
    if(containsStart && containsEnd){
      var...