當用戶滾動到div時，JQuery加載並淡入圖像

Question

<div class="strategy" class="hidden"> 
     <img src="http://pic1.com" /> 
    </div> 

    <div class="creative" class="hidden"> 
     <img src="http://pic2.com" /> 
    </div> 

我有像上面這樣的圖像div的負載。我的意圖是隻有當用戶向下滾動到一個div，然後該div內的圖像開始加載一個指標，並在完成加載後圖像淡入。目前我使用jquery.appear插件來使圖像淡入當用戶滾動到div。但所有的圖像一次加載。我只需要當用戶向下滾動div然後加載然後淡入。請幫助我。下面是我在使用淡入與插件的代碼。

$(document).ready(function() { 
    function fadeInDivs(elements){ 
     for(var i=0;i<elements.length;i++){ 
      array[i].appear(function(){ 
      $(this).css('visibility', 'visible') 
       .hide() 
       .fadeIn(3000); 
     } 
    }   
}); 

var array = [$('.strategy'),$('.creative')]; 
fadeInDivs(array); 

的，因爲我可憐的解釋，人們誤以爲我的問題也許。我不問如何檢測用戶是否滾動到div（我已經成功地做到了這一點）。我的問題是當用戶向下滾動到div時如何使用帶有指示器的AJAX加載圖像。

Answer 1

有代碼中的小bug：

function fadeInDivs(elements){ 
     for(var i=0;i<elements.length;i++){ 
      elements[i].appear(function(){ 
      $(this).css('visibility', 'visible') 
       .hide() 
       .fadeIn(3000);  
       // The following brace & bracket were missing 
      }); 
     } 
    } 
var array = [$('.strategy'),$('.creative')]; 
$(document).ready(function() { 
    /// IMO it's better to define the function outside of this, then call it inside. 
    fadeInDivs(array); 
}); 

例張貼在這裏： http://jsfiddle.net/NqWLH/1/

Answer 2

還有一個更簡單的方法：

$('.strategy, .creative').hide().fadeIn(); 

Answer 3

不要把SRC的圖像，請使用替代屬性：

<div class="strategy" class="hidden"> 
    <img srcToLoad="http://pic1.com" /> 
</div> 

<div class="creative" class="hidden"> 
    <img srcToLoad="http://pic2.com" /> 
</div> 

那麼當滾動到達您的圖像（假設它到達我們的例子中的第一個）：隱藏類的內部

var imgSrc = $('.strategy img').attr('srcToLoad'); 
$('.strategy img').attr('src', imgSrc); 

此外，在所有的圖像加載處理程序：

$(function() { 
    $('.hidden img').load(function() { 
     $(this).parent().fadeIn(3000); 
    }); 
}); 

的加載處理程序將在圖像加載完成時執行。