jquery按顺序加载图像并保留它们？

Question

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

所以，我正在使用Document ready函数来“触发”它，但无法在图库中逐一提出如何'.fadein（）'图像。

因此，当DOM准备就绪时，IMG [1]将淡入，然后，一旦完成，IMG [2]将开始淡入。如果这是有道理的。

我尝试使用'.queue（）'函数，但我在这个实例中根本无法使用它。

我愿意接受任何有关不同想法的建议（不是jquery）：）

感谢

-Jim

Answer 1

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

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

     });
});

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

Answer 2

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

http://jsbin.com/ayero6

Answer 3

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

Answer 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/

Answer 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>