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然后加载然后淡入。请帮助我。这是我用插件淡入的代码。

$(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

您的代码中存在一个小错误：

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);
   });
});

当图像完成加载时，将执行加载处理程序。

当用户滚动到div时，JQuery加载并淡入图像

3 个答案: