     else @props.onLoad? args...
   handleError: (args...) ->
     @props.onError? args...
-  render: ->
+  renderImg: ->
     (img merge @props,
       ref: 'image'
       onLoad: @handleLoad
       onError: @handleError
     )
+  render: ->
+    if @state.isInitialRender
+      # We will initially render the <img> tag in a <noscript> (see note in
+      # `getInitialState` for reasons). This will increase accessibility in that
+      # rare case when the serialized component is served to a browser with
+      # javascript disabled, but ensure that the image won't start loading
+      # before we're ready. However, there is an issue
+      # (https://github.com/facebook/react/issues/1252) that causes noscript to
+      # cause invariant violations when rendered on the server. So, we render it
+      # as a string and set the inner HTML of a wrapper span.
+      html = React.renderComponentToStaticMarkup (noscript null, @renderImg())
+      (span
+        style:
+          display: 'none'
+        dangerouslySetInnerHTML:
+          __html: html
+      )
+    else
+      @renderImg()
 
 
 module.exports = ImageLoader = React.createClass


ImageLoaderImg = React.createClass
  displayName: 'ImageLoaderImage'
  handleLoad: (args...) ->
    return unless @isMounted()
    image = @refs.image

ReactLoaderMixin = require 'react-loadermixin'

{PropTypes} = React
{span, img, noscript} = React.DOM

Status =
  PENDING: 'pending'
