关于mathjax加载缓慢的解决方法

最新推荐文章于 2024-10-08 10:55:40 发布
最新推荐文章于 2024-10-08 10:55:40 发布
阅读量5.5k 收藏 8
点赞数 1
文章标签： mathjax 渲染 js php yii
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyuxilu/article/details/78584321
版权

php小白，工作中的一个小需求就是解决公式加载的问题，期间遇到3个小问题，相信大家使用的时候也都遇到过，留个备份，也供大家参考

背景 ：

php7

yii2框架

自带标签，公式的文本内容

在view中修改模板文件main.php,我的办法是复制一份修改为自己需要的模板文件

1.mathjax加载出来的公式是块级元素，就是独占一行


解决方法：强制修改公式的样式为行内元素，标记为最重要！网页中所有的公式div 的class都是MathJax_Display

.MathJax_Display {
    width: auto !important;
    display: inline !important;
}
2.mathjax默认不解析$公式$

解决办法：增加配置方法，把$加入进去，因为我的内容中有/(   )/类型的，所有去掉后一个配置

MathJax.Hub.Config({
 tex2jax: {inlineMath: [['$','$']]}
});
3.页面加载时，会显示加载过程，就是从$$到块级元素到行内元素的过程，这是mathjax功能强大，体积过大所造成的渲染缓慢的问题，特别别扭

无法截图，用过的应该都见过

解决方法：隐藏渲染过程，用过元素类型display，但渲染后的页面出现问题，所以改用透明度opacity

先把body透明度设为0

</head>
<body style="opacity:0">

渲染完成改为1

MathJax.Hub.Queue(function () {
  document.getElementsByTagName("body")[0].style.opacity=1;
  
});
大功告成，现在的页面舒服多啦




linyuxilu
关注
页面加载数学公式，mathjax转html
山鬼的博客
06-11 859
web页面加载数学公式，mathjax转化为htmlweb页面加载数学公式 web页面加载数学公式 在线演示1 - 在线转换数学公式 在线演示2 - 在线转换数学公式 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=de
使用KaTeX代替MathJax渲染公式
肖肖肖丽珠的博客
04-14 1391
MathJax渲染公式我写过这样的文章。但是在实际使用的过程中发现有时候频繁刷新页面会导致公式加载一半，全部显示$//$这样的情况。加载的速度也很慢。会把公式转变的过程都呈现出来。于是想着换另一种插件KaTeX。 官网：https://www.bootcdn.cn/KaTeX/ 使用方法： <link href="https://cdn.bootcss.com/KaTeX/0.10...
Android显示数学公式MathJax
03-12
Android解析数学公式，不过mathjax还是老老实实用在web端或者结合html吧，慢的一匹，等的我老年痴呆都犯了，建议参照我另一个资源latex，笔mathjax快多了。
本地cdn缓存：解决Mathjax不稳定加载不出来公式
leoSince2019的博客
06-28 1933
通过安装浏览器插件实现
前端数据加载慢的解决方法
最新发布
小秀的博客
10-08 762
都是和前端性能优化非常类似的做法。
一行配置解决Sphinx 数学公式（mathjax）加载缓慢的问题
huqian1984的博客
07-14 506
一行配置解决Sphinx 数学公式（mathjax）加载缓慢的问题
Mathjax加载慢，如何在Nuxt中加载本地JS文件
weixin_42940307的博客
06-17 637
我们说明了如何在Nuxt中使用Mathjax来渲染数学公式。然而使用CDN来加载Mathjax简单是简单，但是它会降低网页的性能。换句话说，使用CDN加载的Mathjax可能会比较慢。然而在Nuxt中，你很难去整合Mathjax，不仅因为关于这方面的资料很少，而且跟着Mathjax的官方文档走可能对于Nuxt没有什么用。想要解决这个性能问题，其中一种解决办法就是本地加载Mathjax。也就是说，你继续用CDN的方式去加载Mathjax，但是是加载Mathjax的本地JS文件。
解决vue项目引入MathJax脚本后latex公式渲染不及时的问题
weixin_45835850的博客
07-11 410
,})
jupyter:Loading [MathJax]/extensions/Safe.js
ledig_Vogel的博客
09-06 1584
由于异常退出jupyter(电脑死机强制重启)，导致重新打开jupyter提示Loading [MathJax]/extensions/Safe.js，且无法输入，不断换行。 解决方法：右上角logout再重新启动jupyter
MathJax-i18n：MathJax本地化
02-04
MathJax-i18n 该存储库包含MathJax的本地化数据以及用于转换它们的工具。 本地化数据的组织方式如下： config.js：配置语言和域。 JSON /：JSON jquery.i18n格式的可本地化的字符串。 另请参见的 。 @...
uniapp中使用mathJax解析数学公式
03-15
- **动态加载**：如果你担心网络环境，可以考虑在需要时异步加载MathJax，使用uni-app的`uni.requireNativePlugin`方法。 ```javascript uni.requireNativePlugin('mathjax', true).then((res) => { // MathJax ...
MathJax 2.5
01-22
MathJax 2.5最终版。 用于在html中显示整齐好看的数学公式。 官网速度慢，放一个在这里。已出MathJax 2.6，但官网显示404错误。
MathJax最新版本
11-01
MathJax的最新版本更是优化了性能，提升了用户体验，解决了以往版本中可能出现的显示问题。 MathJax的核心功能在于它的渲染引擎，它能够将数学公式转化为清晰的图像，适应各种屏幕分辨率和浏览器环境。无论是线性...
MathJax-2.7.7.zip
03-18
4. **动态渲染**：MathJax能够在页面加载后动态解析和渲染数学公式，这意味着即使内容是在页面交互后动态生成的，MathJax也能正确处理。 5. **跨平台兼容**：由于MathJax是基于JavaScript的，因此它可以无缝地工作...
一对一、一对多延迟加载（配置文件）
qq1424035130的博客
06-14 444
1.一对一（账户对用户）： （1）.在map中的配置 <resultMap id="accountUserMap" type="account"> <id property="id" column="id"></id> <result property="uid" column="uid"></resu...
MathJax基本的使用方式
热门推荐
GG的专栏
07-04 2万+
依照mathjax-basic-tutorial-and-quick-reference，总结mathjax的基本用法。
MathJax动态显示数学公式的时候不显示渲染过程
肖肖肖丽珠的博客
07-04 3650
我们在接口给的数据渲染公式以后。他有个渲染的过程。我们能看到他一点点的加载的过程。怎么做让这个过程不显示。等加载完了再显示呢？ //转换页面的图片数学公式 var mathdivs =$("#testListBox").find(".mathDiv"); for(var i = 0; i < mathdivs...
MathJax: 打造优雅的数学公式渲染体验
gitblog_00024的博客
03-20 571
MathJax: 打造优雅的数学公式渲染体验 MathJaxBeautiful and accessible math in all browsers项目地址:https://gitcode.com/gh_mirrors/ma/MathJax 是一个强大的开源JavaScript库，用于在网页中渲染高质量的数学公式。这个项目让在线教育、学术出版、科技博客等领域能够轻松地展示复杂的数学表达式，提供...
动态加载 mathjax
06-02
要动态加载 MathJax，您需要在页面中添加 MathJax 的 JavaScript 文件，并在需要使用 MathJax 的地方通过 JavaScript 脚本来启动和配置 MathJax。 以下是一个简单的示例： 1. 在页面中添加 MathJax 的 JavaScript 文件 ```html <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"> </script> ``` 2. 编写 JavaScript 脚本来启动和配置 MathJax ```javascript // 配置 MathJax MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']], processEscapes: true } }); // 手动启动 MathJax MathJax.Hub.Queue(['Typeset', MathJax.Hub]); ``` 在需要使用 MathJax 的地方，您可以使用类似下面这样的 HTML 代码： ```html <div> 在行内公式中使用 MathJax：$x^2 + y^2 = z^2$ </div> <div> 在块级公式中使用 MathJax： \[ \int_0^1 x^2 \, dx = \frac{1}{3} \] </div> ``` 当您的页面加载完成后，MathJax 会自动运行并将公式渲染为可视化的形式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值