Three.js loadTexture issue

So I want to make an 8ball in three.js I have this setting

var scene = new THREE.Scene();
var width  = window.innerWidth,
    height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 45, width / height, 0.01, 1000 );
camera.position.z = 1.5;

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 5, 3, 5 );
scene.add( light );

var geometry = new THREE.SphereGeometry( 0.5, 32, 32 );
THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/3tU4Vig.jpg');
var material = new THREE.MeshPhongMaterial( {
  map: texture,
  specular: new THREE.Color('grey')
} );

var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );


function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();

Now that works:

THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/3tU4Vig.jpg');
var material = new THREE.MeshPhongMaterial( {
  map: texture,
  specular: new THREE.Color('grey')
} );

but an image with exactly the same size, format etc. fails to display (well it renders just a black ball):

THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/CkFSjjv.jpg');
var material = new THREE.MeshPhongMaterial( {
  map: texture,
  specular: new THREE.Color('grey')
} ); 

working img: http://i.imgur.com/3tU4Vig.jpg not working: http://i.imgur.com/CkFSjjv.jpg What am I doing wrong?