Trying to create a new div at runtime and swap the contents of it with an existing div

I am trying to convert an old coffeescript widget to jsx and having some problems with the jsx side of things. I am not a programmer so trying to learn on the fly.

This is the same thing I dealt with back in 2015 in #143 with the exception that back then I was using coffeescript which I did get working. Now trying to re-implement the same thing with jsx.

Basically I want to create a widget that initializes with a jpg file from the internet and then on each refresh gets a new jpg, builds a new div with the backgroundImage attribute and then swaps the original div with the new div. I am clueless how to start.

In the coffeescript version I had this code that used the img.onload function to create a new div and set a fade-in time. Once the image was loaded fully it removed the old div that I tagged with the class old.

  $domEl = $(domEl)
  img = new Image
  img.onload = ->
    $domEl.find('div').addClass 'old'
    $div = $('<div class="container" />')
    $div.css 'background-image', 'url("' + img.src + '")'
    $div.css 'display', 'none'
    $div.fadeIn 'slow', ->
      $domEl.find('div.old').remove()
      return
  img.src = url

I have a jsx script created that pulls the initial image the render function returns like this:

    return (
      <div id="wallpaper">
        <div id="container" className="container" style={{backgroundImage: 'url("' + url + '")'}}></div>
      </div>
    );

This works and changes the image but during the transition the Mac desktop is shown briefly before the new image is loaded. Thus the reason to build the 2nd div offscreen and slowly fade it in before removing the original div.

Any ideas how/if jsx can use an img.onload function or another way to accomplish the same thing?

felixhageloh / uebersicht

Trying to create a new div at runtime and swap the contents of it with an existing div #490