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

<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然後加載然後淡入。請幫助我。下面是我在使用淡入與插件的代碼。當用戶滾動到div時，JQuery加載並淡入圖像

$(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加載圖像。

來源

2011-03-21 ForeverNights

有代碼中的小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/

來源

2011-03-21 18:11:40 n00dle

我添加了代碼，但當我滾動到DIV時，我的顯示沒有顯示。我收到一個錯誤'elements [i] .appear'不是函數 – Si8 2014-02-20 20:27:34

還有一個更簡單的方法：

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

來源

2011-03-21 18:05:52 mattsven

不要把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); 
    }); 
});

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

來源

2011-03-21 19:17:18 capi

我遵循並且沒有工作......這是你的意思嗎？（var i = 0; i ForeverNights 2011-03-21 20:01:09

$（函數（）{...}）;應該是函數fadeInDivs聲明之外，它應該有一個選擇，像」 .hidden IMG。 '（這意味着.hidden類中的所有圖像） – capi 2011-03-21 20:24:39

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

回答

相關問題