jquery 用于顺序加载图像并保留它们？答案

【问题标题】：jquery for loading images sequentially and keeping them?jquery 用于顺序加载图像并保留它们？
【发布时间】：2011-06-13 11:25:55
【问题描述】：

我正在寻找一个简单的 jquery，它将按顺序加载图像。

所以，我正在使用 Document ready 功能来“触发”它，但是无法想出如何在画廊中一张一张地“.fadein()”图像。

所以，当 DOM 准备好时，IMG[1] 将淡入，然后，一旦完成，IMG[2] 将开始淡入。如果这有意义的话。

我尝试使用 '.queue()' 函数，但在这种情况下我根本无法使用它。

我愿意接受任何关于不同想法的建议（不是 jquery）:)

谢谢

-吉姆

【问题讨论】：

标签： jquery jquery-plugins loader

【解决方案1】：

使用 fadein()，您还可以提供一个在淡入完成时执行的回调函数。所以你可以这样做：

$('#img1').fadeIn('1000', function(){
    $('#img2').fadeIn('1000', function(){
            //go on as you like

     });
});

当然，这只是一个示例，您应该创建一些更复杂的控制方法来淡化所有图像，而无需编写数千个嵌套函数。（如果你提供你的 html 也许我可以帮助你）

【讨论】：

【解决方案2】：

这不会按特定顺序加载和淡化它们，但它是等待加载图像的最简单方法。

http://jsbin.com/ayero6

【讨论】：

【解决方案3】：

  $("img:first-child").fadein("fast", function () {
    $(this).next().fadein("fast", arguments.callee); 
  });

【讨论】：

【解决方案4】：

这种方法比对 dom 进行多次回调更有效。

容器内的每个项目都会依次淡入

$(document).ready(function() {

var faders = $('#container').children().hide();
    i = 0;

function awesomeFaders() {
    $(faders[i++]).delay(500).fadeIn(2000, arguments.callee);
};
awesomeFaders();

})

来源：http://jc-designs.net/blog/2010/06/more-than-one-way-to-skin-a-jquery/

【讨论】：

【解决方案5】：

试试这个：

    <script type="text/javascript">
    $(function() {
        $("img").hide();
        $("#1").fadeIn('slow', function() {
            $("#2").fadeIn('slow', function() {
                $("#3").fadeIn('slow', function() {
                    $("#4").fadeIn('slow', function() {
                        $("#5").fadeIn('slow');
                    });
                });
            });
        });
    });
</script>

html:

    <div>
    <img src="img.jpg" id="1" />
    <img src="img.jpg" id="2" />
    <img src="img.jpg" id="3" />
    <img src="img.jpg" id="4" />
    <img src="img.jpg" id="5" />
</div>

【讨论】：