jQuery load加载的HTML内容中GlslCanvas脚本无法识别canvas元素问题咨询

问题根本原因 #

你遇到的是异步DOM加载和脚本初始化时序不匹配的问题：

• jQuery.load()是异步请求，$(document).ready触发时，你的博文内容还在请求中，并未插入到页面DOM里
• GlslCanvas默认只会在自身脚本加载完成时，扫描当前页面已存在的.glslCanvas元素做初始化，后续动态插入的canvas不会被自动识别

修复方案 #

你只需要修改load.js的逻辑，在每块博文内容加载完成后，手动触发对应canvas的GlslCanvas初始化即可，具体改法如下：

步骤1：修改load.js的加载逻辑 #

利用jQuery.load()的回调函数，等内容插入DOM完成后，再初始化新增的GlslCanvas元素：

$(document).ready(function () {
    // 公共组件加载
    $('#header').load("./Includes/include_header.html");
    $('#footer').load("./Includes/include_footer.html");
    $('#navbar').load("./Includes/include_navbar.html");

    // 封装博文加载+初始化逻辑，避免重复代码
    function loadPost(containerId, postPath) {
        $(containerId).load(postPath, function() {
            // 内容加载完成后，遍历当前容器内所有.glslCanvas元素手动初始化
            $(this).find('.glslCanvas').each(function() {
                new GlslCanvas(this);
            });
        });
    }

    // 加载博文
    loadPost('#post3', "./Posts/2021-11-16-Starting-Book-of-Shaders.html");
    loadPost('#post2', "./Posts/2021-11-12-Lecture-1.html");
    loadPost('#post1', "./Posts/2021-11-12-Start.html");
});

步骤2：调整GlslCanvas引入顺序 #

调整head里的引入顺序，保证GlslCanvas在load.js之前加载完成，避免调用时找不到对象：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 先加载GlslCanvas，保证load.js里调用时构造函数已存在 -->
<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>
<script src="/Includes/load.js"></script>

建议移除原引入的defer属性，避免异步加载带来的时序问题。

验证方式 #

改完后刷新页面，动态加载的博文中的canvas就会被正常识别渲染，不需要再把GlslCanvas引入放到单独的博文页面里。

内容的提问来源于stack exchange，提问作者Permafrost