導致JQuery幻燈片停止工作的遠程圖像

Question

我有一個基本的幻燈片，當它們是本地/相對時顯示圖像很好。如果我嘗試從另一個域加載圖像，圖像加載並顯示正常，但是圖庫不會前進到下一步。

作品：

<ul class="slides"> 
<li><img src="img/photos/1.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li> 
<li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li> 
<li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li> 
<li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li> 
</ul> 

荷載第一圖像，然後停止：

<ul class="slides"> 
    <li><img src="http://www.alfajango.com/blog/wp-content/uploads/2010/10/rails-remote.jpg"width="620" height="320" alt="Turrimetta Beach - Dawn" /></li> 
    <li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li> 
    <li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li> 
    <li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li> 
</ul> 

jQuery的從Here

$(window).load(function(){ 

// We are listening to the window.load event, so we can be sure 
// that the images in the slideshow are loaded properly. 


// Testing wether the current browser supports the canvas element: 
var supportCanvas = 'getContext' in document.createElement('canvas'); 

// The canvas manipulations of the images are CPU intensive, 
// this is why we are using setTimeout to make them asynchronous 
// and improve the responsiveness of the page. 

var slides = $('#slideshow li'), 
    current = 0, 
    slideshow = {width:0,height:0}; 

setTimeout(function(){ 

    window.console && window.console.time && console.time('Generated In'); 

    if(supportCanvas){ 
     $('#slideshow img').each(function(){ 

      if(!slideshow.width){ 
       // Taking the dimensions of the first image: 
       slideshow.width = this.width; 
       slideshow.height = this.height; 
      } 

      // Rendering the modified versions of the images: 
      createCanvasOverlay(this); 
     }); 
    } 

    window.console && window.console.timeEnd && console.timeEnd('Generated In'); 

    $('#slideshow .arrow').click(function(){ 
     var li   = slides.eq(current), 
      canvas  = li.find('canvas'), 
      nextIndex = 0; 

     // Depending on whether this is the next or previous 
     // arrow, calculate the index of the next slide accordingly. 

     if($(this).hasClass('next')){ 
      nextIndex = current >= slides.length-1 ? 0 : current+1; 
     } 
     else { 
      nextIndex = current <= 0 ? slides.length-1 : current-1; 
     } 

     var next = slides.eq(nextIndex); 

     if(supportCanvas){ 

      // This browser supports canvas, fade it into view: 

      canvas.fadeIn(function(){ 

       // Show the next slide below the current one: 
       next.show(); 
       current = nextIndex; 

       // Fade the current slide out of view: 
       li.fadeOut(function(){ 
        li.removeClass('slideActive'); 
        canvas.hide(); 
        next.addClass('slideActive'); 
       }); 
      }); 
     } 
     else { 

      // This browser does not support canvas. 
      // Use the plain version of the slideshow. 

      current=nextIndex; 
      next.addClass('slideActive').show(); 
      li.removeClass('slideActive').hide(); 
     } 
    }); 

},100); 

// This function takes an image and renders 
// a version of it similar to the Overlay blending 
// mode in Photoshop. 

function createCanvasOverlay(image){ 

    var canvas   = document.createElement('canvas'), 
     canvasContext = canvas.getContext("2d"); 

    // Make it the same size as the image 
    canvas.width = slideshow.width; 
    canvas.height = slideshow.height; 

    // Drawing the default version of the image on the canvas: 
    canvasContext.drawImage(image,0,0); 


    // Taking the image data and storing it in the imageData array: 
    var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), 
     data  = imageData.data; 

    // Loop through all the pixels in the imageData array, and modify 
    // the red, green, and blue color values. 

    for(var i = 0,z=data.length;i<z;i++){ 

     // The values for red, green and blue are consecutive elements 
     // in the imageData array. We modify the three of them at once: 

     data[i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 
     data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 
     data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 

     // After the RGB elements is the alpha value, but we leave it the same. 
     ++i; 
    } 

    // Putting the modified imageData back to the canvas. 
    canvasContext.putImageData(imageData,0,0); 

    // Inserting the canvas in the DOM, before the image: 
    image.parentNode.insertBefore(canvas,image); 
} 

}）截取;

Answer 1

我唯一的猜測是，它是與：

$(window).load(function(){ 

我知道這不是理想的，但嘗試與此的document.ready更換window.load看看會發生什麼：

$(document).ready(function() {