預先載入圖像與jQuery獲得圖像

Question

的主色我創建了以下testpage：http://methodus.de/wp/

它讓每個博客文章的圖像的主色和向下滾動頁面時將它們用於動畫。不幸的是，只要圖像未被完全加載就無法計算顏色（請參閱javascript警報）。那麼動畫不起作用。當我重新加載頁面時，由瀏覽器緩存的圖像，以及一切像charme一樣工作。

相關的代碼是：

$('.bg').each(function(index) { 
     var url = $(this).data('background-image'); 
     img = new Image(); 
     img.src = url; 
     averageColours[url] = getAverageColourAsRGB(img); 
     $(this).css('background-image', 'url(' + url + ')'); 
    }); 

    $('.bg').waypoint(function() { 
     var url = $(this).data('background-image'); 
     var colour = getPreloadedAverageColourAsRGB(url); 
     console.log(url + ' ' + colour.r + ',' + colour.g + ',' + colour.b); 
     $('body').data('bgColour', 'rgb(' + colour.r + ',' + colour.g + ',' + colour.b + ')'); 
     $('body').animate({backgroundColor: $('body').data('bgColour')}); 
    }, { offset: 0 }); 

我怎麼能推遲航點結合到這裏滿載的圖像？

Answer 1

有一些hacky的方式使用$.load來做到這一點，但目前我發現的最好的方法是使用imagesloaded。

然後，您可以這樣做：

$('.my-content-class').imagesLoaded(function() { 
    // ... your code here 
});