如何更改javascript事件侦听器？

我刚换了一个新的shopify主题。我遇到了一些代码问题，这些代码在我的其他主题上工作得很好，但在这个新主题上没有，因为它们的主题是如何构造的。 他们的文档说明使用以下事件侦听器，而不是document.onload和$（document.ready（）：

document.addEventListener（'page:loaded'，function（）{
console.log（'page:loaded'）；
});

要使此代码与新主题一起工作，您需要收听特定于此新主题的自定义事件

页面：loaded

，而不是标准事件

窗口。onload

或

$（document）.ready（）

在下面，您将找到适合新事件的旧代码段：

• 第一个脚本标记：

document.addEventListener（'page:loaded'，function（）{
$（'a[data rel^=lightcase]'）。lightcase（）；
});

• 第二个：

document.addEventListener（'page:loaded'，function（）{
var窗帘=新窗帘({
容器：“平面画布”
});
var planeEls=document.getElementsByClassName（“平面”）；
var vs=`ifdef GL#ES
精密中泵浮子；
#恩迪夫
//默认强制属性
属性向量3；
属性向量2编码；
//这些投影矩阵和模型视图矩阵由库生成
//它将根据其HTML元素CSS值来定位和调整飞机的大小
均匀mat4-uMVMatrix；
一致mat4上矩阵；
//纹理坐标将被传递到片段着色器
可变向量2 vTextureCoord；
void main（）{
//基于投影矩阵和模型视图矩阵应用顶点位置
gl_位置=上矩阵*UMV矩阵*vec4（1.0）；
//变化的
//使用纹理矩阵和原始纹理坐标生成精确的纹理坐标
vTextureCoord=ATextureCord；
}`;
var fs=`
#国际财务报告准则
精密中泵浮子；
#恩迪夫
//把我们的车开走
可变的vec3-vVertexPosition；
可变向量2 vTextureCoord；
//我们在javascript中声明的制服
均匀浮动时间；
//我们的纹理采样器（默认名称，若要使用其他名称，请参阅文档）
纹理均匀；
vec3色（vec3色，浮动色调）{
vec3k=vec3（0.57735,0.57735,0.57735）；
浮动余弦角=余弦（色调）；
返回col*余弦角+十字（k，col）*正弦（色调）+k*点（k，col）*（1.0-余弦角）；
}
vec3饱和（vec3 rgb，浮动调整）{
vec3 W=vec3（0.2125,0.7154,0.0721）；
vec3强度=vec3（点（rgb，W））；
返回混合（强度、rgb、调整）；
}
void main（）{
//获取我们的纹理坐标
vec2 textureCoord=vTextureCoord；
//基于时间均匀和纹理UV沿两个轴置换像素
//这将创建一种水面效果
//尝试注释一行或更改常量，以查看它如何更改效果
//提醒：纹理坐标在两个轴上的范围为0.0到1.0
常数浮点PI=3.141592；
TextureCord.x+=(
sin（textureCoord.x*12.0+（（uTime*（PI/15.0））*0.031））
+sin（textureCoord.y*12.0+（（uTime*（PI/12.489））*0.047））
) * 0.0050;
TextureCord.y+=(
sin（textureCoord.y*8.0+（（uTime*（PI/12.023））*0.023））
+sin（textureCoord.x*8.0+（（uTime*（PI/15.1254））*0.067））
) * 0.0100;
vec4颜色=纹理2D（平面纹理，纹理命令）；
//色调在10秒内从0旋转到PI
浮点数=cos（uTime/600.0）*PI；
color.rgb=hueRotate（color.rgb，hueRotation）；
//饱和
color.rgb=饱和（color.rgb，2.0）；
gl_FragColor=颜色；
}
`;
var平面=[]；
功能手柄（索引）{
变量平面=平面[指数]；
飞机
.onReady（函数（）{
//我们的纹理已加载，请调整飞机大小！
plane.planeResize（）；
})
.onRender（函数（）{
平面。制服。时间。值++；
});
}
对于（变量i=0；i

要使此代码与新主题一起工作，您需要收听特定于此新主题的自定义事件

页面：loaded

，而不是标准的事件

窗口。onload

或

$（document）.ready（）

在下面，您将找到适合新事件的旧代码段：


第一个脚本标记：


document.addEventListener（'page:loaded'，function（）{
$（'a[data rel^=lightcase]'）。lightcase（）；
});


第二个：


document.addEventListener（'page:loaded'，function（）{
var窗帘=新窗帘({
容器：“平面画布”
});
var planeEls=document.getElementsByClassName（“平面”）；
var vs=`ifdef GL#ES
精密中泵浮子；
#恩迪夫
//默认强制属性
属性向量3；
属性向量2编码；
//这些投影矩阵和模型视图矩阵由库生成
//它将根据其HTML元素CSS值来定位和调整飞机的大小
均匀mat4-uMVMatrix；
一致mat4上矩阵；
//纹理坐标将被传递到片段着色器
可变向量2 vTextureCoord；
void main（）{
//基于投影矩阵和模型视图矩阵应用顶点位置
gl_位置=上矩阵*uMVMatrix*vec4（1.0）
<script type="text/javascript">
   document.addEventListener('page:loaded', function() {
        $('a[data-rel^=lightcase]').lightcase();
    });
  </script>

<script>
document.addEventListener('page:loaded', function() {
  var curtains = new Curtains({
    container: "planes-canvas"
  });

  var planeEls = document.getElementsByClassName("planes");

  var vs = `#ifdef GL_ES
  precision mediump float;
  #endif

  // default mandatory attributes
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;

  // those projection and model view matrices are generated by the library
  // it will position and size our plane based on its HTML element CSS values
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  // texture coord varying that will be passed to our fragment shader
  varying vec2 vTextureCoord;

  void main() {
    // apply our vertex position based on the projection and model view matrices
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

    // varying
    // use texture matrix and original texture coords to generate accurate texture coords
    vTextureCoord = aTextureCoord;
  }`;

  var fs = `
    #ifdef GL_ES
    precision mediump float;
    #endif

    // get our varyings
    varying vec3 vVertexPosition;
    varying vec2 vTextureCoord;

    // the uniform we declared inside our javascript
    uniform float uTime;

    // our texture sampler (default name, to use a different name please refer to the documentation)
    uniform sampler2D planeTexture;


    vec3 hueRotate(vec3 col, float hue) {
        vec3 k = vec3(0.57735, 0.57735, 0.57735);
        float cosAngle = cos(hue);
        return col * cosAngle + cross(k, col) * sin(hue) + k * dot(k, col) * (1.0 - cosAngle);
    }

    vec3 saturate(vec3 rgb, float adjustment) {
        vec3 W = vec3(0.2125, 0.7154, 0.0721);
        vec3 intensity = vec3(dot(rgb, W));
        return mix(intensity, rgb, adjustment);
    }


    void main() {
        // get our texture coords
        vec2 textureCoord = vTextureCoord;

        // displace our pixels along both axis based on our time uniform and texture UVs
        // this will create a kind of water surface effect
        // try to comment a line or change the constants to see how it changes the effect
        // reminder : textures coords are ranging from 0.0 to 1.0 on both axis
        const float PI = 3.141592;

        textureCoord.x += (
                    sin(textureCoord.x * 12.0 + ((uTime * (PI / 15.0)) * 0.031))
                    + sin(textureCoord.y * 12.0 + ((uTime * (PI / 12.489)) * 0.047))
                    ) * 0.0050;

                textureCoord.y += (
                    sin(textureCoord.y * 8.0 + ((uTime * (PI / 12.023)) * 0.023))
                    + sin(textureCoord.x * 8.0 + ((uTime * (PI / 15.1254)) * 0.067))
                    ) * 0.0100;

        vec4 color = texture2D(planeTexture, textureCoord);

        // hue rotation from 0 to PI in 10 seconds
        float hueRotation = cos(uTime / 600.0) * PI;
        color.rgb = hueRotate(color.rgb, hueRotation);

        // saturate
        color.rgb = saturate(color.rgb, 2.0);

        gl_FragColor = color;
    }
`;

  var planes = [];

  function handlePlane(index) {
    var plane = planes[index];

    plane
      .onReady(function () {
        // our texture has been loaded, resize our plane!
        plane.planeResize();
      })
      .onRender(function () {
        plane.uniforms.time.value++;
      });
  }

  for (var i = 0; i < planeEls.length; i++) {
    var params = {
      vertexShader: vs,
      fragmentShader: fs,
      uniforms: {
        time: {
          name: "uTime",
          type: "1f",
          value: 0
        }
      }
    };

    var plane = curtains.addPlane(planeEls[i], params);

    if (plane) {
      planes.push(plane);

      handlePlane(i);
    }
  }
});
</script>