关于老虎机在页面重复加载以及卡顿等问题

[Mr-Yang520]

• 你当前是什么框架(必填)：react

• 你当前插件的版本(必填)：lucky-canvas/react": "^0.1.12"

• 当前环境是小程序还是浏览器(选填)：浏览器

• 详细描述你的bug：进入有老虎机插件的页面加载缓慢 部分机型 ios 7 13 页面重复加载

• 问题代码(重要)：

const myLucky = useRef()

const _width = '80%' const _Top = '0'

const data = { blocks: [ { padding: '7px 0', imgs: [ { src: lotteryImg, width: '100%', height: '100%', }, ], }, ], slots: [ { order: [8, 1, 2, 3, 4, 5, 6, 7, 8, 3], direction: 1 }, { order: [8, 2, 3, 4, 5, 6, 7, 8, 9, 1], direction: -1 }, { order: [8, 3, 4, 5, 6, 7, 8, 9, 0, 4], direction: 1 }, ], prizes: [ { imgs: [ { width: _width, top: _Top, src: shakeImg.Num1, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num2, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num3, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num4, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num5, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num6, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num7, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num8, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num9, }, ], }, { imgs: [ { width: _width, top: _Top, src: shakeImg.Num2, }, ], }, // { fonts: [{ text: '0', top: '15%' }] }, // { fonts: [{ text: '1', top: '15%' }] }, // { fonts: [{ text: '2', top: '15%' }] }, // { fonts: [{ text: '3', top: '15%' }] }, // { fonts: [{ text: '4', top: '15%' }] }, // { fonts: [{ text: '5', top: '15%' }] }, // { fonts: [{ text: '6', top: '15%' }] }, // { fonts: [{ text: '7', top: '15%' }] }, // { fonts: [{ text: '8', top: '15%' }] }, // { fonts: [{ text: '9', top: '15%' }] }, ], defaultStyle: { // borderRadius: Infinity, // background: '#bac5ee', // fontSize: '32px', // fontColor: '#333', }, defaultConfig: { rowSpacing: '18px', colSpacing: '10px', speed: 50, decelerationTime: 4000, }, }

const onStart = () => { getDoDrawAction((pass) => { if (pass) { myLucky.current.play()

    setTimeout(() => {
      const res = [
        [9, 2, 6],
        [2, 5, 7],
        [1, 7, 2],
        [3, 6, 1],
      ]
      const index = res[(Math.random() * 4) >> 0]

      const winningAward = [[8, 8, 8]]
      const winningAwardIndex = winningAward[0]

      const finallyIndex =
        pass.code === 'success' ? winningAwardIndex : index
      myLucky.current.stop(finallyIndex)
      
      setTimeout(() => {
        //todo
      }, 6000)
    }, 1000)
  }
})

}

// 代码结束

[Mr-Yang520]

很大原因可能是图太多了 但页面会重复刷新 ？？

[buuing]

重复加载? 你是说组件重复渲染吗? 还是抽奖插件重复渲染? 没太看懂你描述的意思

[Mr-Yang520]

重复加载? 你是说组件重复渲染吗? 还是抽奖插件重复渲染? 没太看懂你描述的意思 老虎机组件导致页面重复加载 就是不停的白屏到页面渲染

[buuing]

可否 复现个可运行的demo发给我?

[Mr-Yang520]

老虎机每列降到4张图片就没问题了

[buuing]

额, 能复现个demo发我吗, 我想看看是哪里的原因

[Mr-Yang520]

可否 复现个可运行的demo发给我?

项目太忙 demo暂时没得 目前只有我发的代码片段 也是实际项目中用到的 只是图用的和你这边示例不同

[Mr-Yang520]

如果你这边有时间 你可以试一下 触发这个问题的条件 - 每列9张大于10k的图片

[buuing]

好的, 中秋节放假我试试

[buuing]

你用的是react几

[buuing]

你能把部分 package.json 的版本信息发出来吗

[Mr-Yang520]

你能把部分 package.json 的版本信息发出来吗 "react": "^16.2.0", "react-dom": "^16.2.0", "react-load-script": "0.0.6", "react-loadable": "^5.3.1", "react-router": "^4.2.0", "react-router-config": "^5.1.1", "react-router-dom": "^4.2.2",