使用jquery加載圖像時加載div

Question

在加載頁面時，我的圖像滑塊需要一兩秒鐘才能加載，並且其下方的着色圖像立即出現（與滑塊圖像相比文件很小）。你可以在這裏看到它：homepage

我想陰影圖像加載後，只有在滑塊圖像完成加載。一旦第一個滑塊圖像完成加載，將會更好地應用優雅的淡入淡出效果。

我似乎無法弄清楚如何在jquery中寫這個。任何幫助？謝謝！

Answer 1

您可以使用圖像onload事件。

使用jQuery它看起來像

$('#image_id').load(function() { 
    $('#div_id').fadeIn('fast'); 
}); 

如果要插入圖像（S）動態你可以將它放入創建者對象：

$('<img>', { 
    src: '/myimages/foo.jpg', 
    id: 'bar', 
    load: function() { 
     $('#div_id').fadeIn('fast'); 
    } 
}).appendTo(#somewhere); 

參考：.load()
示例：http://www.jsfiddle.net/4yUqL/20/

Answer 2

您可以對圖像執行加載操作。

使用jQuery將onload綁定到滑塊的圖像上，並默認隱藏陰影。

$('#img').bind("load", function() { 
    $('#theshadow').show(); 
}); 

當然，你需要一個方式與您的滑塊（具有多種圖像和其他功能）來做到這一點。但圖像上的加載事件應該是你想要的。

見this，它關係