javascript - 为什么 Codepen.io 不显示此笔的缩略图/预览？

Question

http://codepen.io/fauxnoir/pen/mJwBxm

AUDIO_FILE = 'http://matthiasdv.org/cdn/tracks/robbery_song'

CODECS = [ 'mp3' ]

stats = new Stats()
stats.domElement.style.position = 'absolute'
stats.domElement.style.left = '0px'
stats.domElement.style.top = '0px'

# CONFIG
FORCE_INWARDS = 1000
RADIUS_INWARDS = 3000
FORCE_OUTWARDS = -200000
RADIUS_OUTWARDS = 400
NUM_PARTICLES = 800
PARTICLE_RADIUS_MULTIPLIER = 0.6
PARTICLE_MIN_MASS = 3.0
PARTICLE_MAX_MASS = 6.0



class Simulation

  @COLOURS = [
    '#030106'
  ]

  constructor: ->

    @physics = new Physics()
    @mouse = new Particle()
    @mouse.fixed = true
    @height = window.innerHeight
    @width = window.innerWidth

    @renderTime = 0
    @counter = 0

  setup: (full = yes) ->

    min = new Vector 0.0, 0.0
    max = new Vector @width, @height

    bounds = new EdgeBounce min, max

    @physics.integrator = new Verlet()

    center = new Vector(@width/2, @height/2)

    attraction = new Attraction center, RADIUS_INWARDS, FORCE_INWARDS
    repulsion = new Attraction center, RADIUS_OUTWARDS, 0
    collide = new Collision()

    # Dancer
    @dancer = new Dancer()
    @kick = @dancer.createKick {
      treshold: 0.2
      onKick: (mag) =>
        repulsion.strength = FORCE_OUTWARDS

        r = Random.item @physics.particles

        repulsion.target.x = r.pos.x
        repulsion.target.y = r.pos.y

      offKick: (mag) ->
        repulsion.strength = 0
    }


    max = if full then NUM_PARTICLES else 200

    for i in [0..max]
      p = new Particle (Random PARTICLE_MIN_MASS, PARTICLE_MAX_MASS)
      p.setRadius p.mass * PARTICLE_RADIUS_MULTIPLIER

      p.moveTo new Vector (Random @width), (Random @height)

      p.behaviours.push attraction
      p.behaviours.push repulsion
      p.behaviours.push bounds
      p.behaviours.push collide

      collide.pool.push p

      @physics.particles.push p

  ### Initialise the demo (override). ###
  init: (@container, @renderer = new WebGLRenderer()) ->

    # Build the scene.
    @setup @renderer.gl?

    # Give the particles random colours.
    for particle in @physics.particles
      particle.colour ?= Random.item Simulation.COLOURS

    # Add event handlers.
    document.addEventListener 'resize', @resize, false

    # Add to render output to the DOM.
    @container.appendChild @renderer.domElement

    # Prepare the renderer.
    @renderer.mouse = @mouse
    @renderer.init @physics

    # Resize for the sake of the renderer.
    do @resize

    #Dancer
    @kick.on()

    @dancer.load {
      src: AUDIO_FILE
      codecs: CODECS
    }

    @dancer.play()

  ### Handler for window resize event. ###
  resize: (event) =>

    @width = window.innerWidth
    @height = window.innerHeight
    @renderer.setSize @width, @height

  ### Update loop. ###
  step: ->

    stats.begin()

    # Step physics.
    do @physics.step

    # Render every frame for WebGL, or every 3 frames for canvas.
    @renderer.render @physics if @renderer.gl? or ++@counter % 3 is 0

    stats.end()

  ### Clean up after yourself. ###
  destroy: ->

    # Remove event handlers.
    document.removeEventListener 'resize', @resize, false

    # Remove the render output from the DOM.
    try container.removeChild @renderer.domElement
    catch error

    do @renderer.destroy
    do @physics.destroy

    @renderer = null
    @physics = null
    @mouse = null



simulation = new Simulation()
playing = false
container = $('#container')

init = ->
  playing = true
  simulation.init(container.get(0))
  update()

update = ->
  requestAnimationFrame(update)

  simulation.step() if playing && simulation

init()

这支笔效果很好。但是...当我查看 my profile 中的预览时它显示空白预览？我的其他笔看起来都很好，只是这一支无法正常显示。

这是为什么呢？哪些代码行导致了这种情况？

Answer 1

迭代次数过多的循环可能会导致预览挂起

此帮助文章可能适用:Turn Off JavaScript in Previews

"On any page that displays a grid of Pens as live previews… This can be useful if you…accidentally create a Pen with JavaScript that is taking to long to run. Perhaps an infinite loop or a loop with so many iterations it hangs the browser."

您还会注意到，几秒钟后您的其他实时预览就会卡住。甚至可以在 codepen.io 主页上观察到这种行为，其中内存密集型预览在几秒钟后卡住，而某些预览(可能是内存密集型较小)继续动画。

FWIW，预览在卡住时显示了页面加载时出现的笔的第一帧，这恰好是一个空白的白色屏幕。也许一个很好的妥协是最初显示许多粒子的一些静态版本，以便预览可以显示一些内容。